Question

目标：用户刷新页面时，它将返回页面的完整视图（模板刀片，主刀片，子刀片..），或者当用户单击链接时，它将仅返回页面的部分视图（子刀片）。

我不知道如何构造代码来实现这一目标。

当前代码的工作方式是，当用户刷新页面或单击链接时，它将仅返回页面的子视图。如何使用“收益”，“扩展”和“部分”或其他方式实现这一目标？

（*（*请注意，我在子刀片中没有屈服，扩展，部分以扩展主刀片，因此它仅返回子视图html。）

这是template blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    @yield('data.csrf')
    <!-- Title Page-->
    <title>{{ ucfirst($title ?? '') }}</title>
    <!-- Main CSS-->
    <link href="{{ asset('/css/theme.css') }}" rel="stylesheet" media="all">
</head>
<body class="animsition">
    <div class="page-wrapper">
        <div class="page-content--bgf7">
            @yield('main')                  //yield the main blade
            @include('template.footer')
        </div>
    </div>

<!-- Jquery JS-->
<script src="{{ asset('/vendor/jquery-3.2.1.min.js') }}"></script>
@yield('js-script')                         //yield the main blade js
</body>
</html>

这是主要的Blade.php

@extends('template')

@section('main')
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="title-3"><i class="fa fa-hdd-o"></i>Data</h3>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('getSubPage1',['id'=> $id]) }}">Subpage1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link"  href="{{ route('getSubPage2',['id'=> $id]) }}">Subpage2</a>
                            </li>
                        </ul>
                    </div>
                    <section id="devices-tabs">
                            <div id="devices-tabs-content"></div>
                            @yield('sub')               //yield the sub blade
                    </section>
                </div>
            </div>
        </div>
    </div>
</section>

@stop


@section('js-script')
<script type="text/javascript">

    $(document).ready(function(){
        //trigger if any tab is clicked
        $('.nav-link').click(function(event) {

            //prevent default href event 
            event.preventDefault();
            event.stopPropagation();

            var linkURL = $(this).attr('href');
            //ajax call to return partial view 
            $.ajax({
                method: 'GET',
                url: linkURL,
                datatype: 'html',
                success: function(data) {
                    if(data.success == true) {
                      if(linkURL!=window.location){
                            $(document).attr("title", data.title);
                            window.history.pushState({path:linkURL},'',linkURL);
                        }
                      $('#devices-tabs-content').html(data.html);
                    } else {
                        alert('somethingwrong!!');
                    }
                }
            });
       });
    });
</script>
@stop

这是sub blade.php

<div class="card-body">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>header1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{$myValue}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是对单击（ajax请求）或刷新的响应的控制器

public function getSubPage1($id,Request $request)
{

    $data = new Data();
    $value = $data::queryValue($id);

    $data=array('myValue'=>$value);

    //return for partial sub view if ajax call 
    if($request->ajax()){
        $returnHTML = view('sub')->with($data)->render();
        return response()->json(array('success' => true, 'html'=>$returnHTML, 'title'=>'Subpage1'));
    }

    //return full view 
    return view('sub')->with($data); 
}

Laravel控制器返回完整视图（刷新时）或部分视图html（ajax调用时）

0 个答案: