根据 ajax 请求呈现多个 blade 视图部分

Render multiple blade view sections on ajax request

当请求为 ajax 时,我正在呈现内容部分并将其插入到 DOM。它按预期工作。

但是..我找不到方法,如何同时渲染多个部分,比如contenttitle等等。

控制器:

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>

Blade:

@extends('layouts.app')

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

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

问题:

如何同时渲染两个或多个?我应该使用数组还是其他东西?请给出示例或完整解释。

感谢您的回答。

你可以只发送一个json object的标题和内容,然后用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);
});