在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); 
});