根据 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);
});