在ajax請求上渲染多個刀片視圖部分

Question

當請求是ajax時，我正在渲染內容部分並將其插入到DOM中。它按預期工作。

但是..我找不到方法，如何在同一時間渲染多個部分，如content和title等。

控制器：

public function awesome(Request $request) { 
    if($request->ajax()){ 
     return view('awesome')->renderSections()['content']; 
    } 
    return view('awesome'); 
} 

Ajax和pushState的

var load = function (url) { 
    $.get(url).done(function (data) { 
     $("#content").html(data); 
    }) 
}; 

$(document).on('click', 'a[data-request="push"]', function (e) { 
    e.preventDefault(); 
    var $this = $(this), 
    url = $this.attr("href"), 
    title = $this.attr('title'); 

    history.pushState({ 
     url: url, 
     title: title 
    }, title, url); 

    // document.title = title; 

    load(url); 
}); 

layouts.app

<title>@yield('title')</title> 
<meta name="description" content="@yield('desc')"/> 

<a data-request="push" title="AWESOME" href="<?= url('/'); ?>/awesome">Awesome</a> 
<a data-request="push" title="RANDOM" href="<?= url('/'); ?>/random">Random</a> 

<div id="content"> 
    @yield('content') 
</div> 

刀片：

@extends('layouts.app') 

@section('title', 'Awesome') 
@section('desc', 'About awesome') 

@section('content') 
    some text from awesome page 
@endsection 

問：

如何呈現在同一時間兩個或更多的人？我應該使用數組還是其他？請舉例或完整的解釋。

感謝您的任何答案。

Answer 1

您只需發送標題和內容的json對象，然後使用JS來解析數組並提取兩個部分。像這樣：

控制器

public function awesome(Request $request) { 
    if($request->ajax()){ 
     $view = view('awesome')->renderSections(); 
     return response()->json([ 
      'content' => $view['content'], 
      'title' => $view['title'], 
     ]); 
    } 
    return view('awesome'); 
} 

Ajax和pushState的

var load = function (url) { 
    $.get(url).done(function (data) { 
     $("#content").html(data.content); 
     document.title = data.title; 
    }) 
}; 

$(document).on('click', 'a[data-request="push"]', function (e) { 
    e.preventDefault(); 
    var $this = $(this), 
    url = $this.attr("href"), 
    title = $this.attr('title'); 

    history.pushState({ 
     url: url, 
     title: title 
    }, title, url); 

    // document.title = title; 

    load(url); 
});