根据 ajax 请求渲染多个刀片视图部分

Posted 2023-02-22

【中文标题】根据 ajax 请求渲染多个刀片视图部分

【英文标题】：Render multiple blade view sections on ajax request

【发布时间】：2017-08-09 23:12:19

【问题描述】：

当请求是 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

问题：

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

感谢您的任何回答。

【参考方案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);
);

【讨论】：

我已经做了同样的事情，但是我没有返回响应，而是编码视图，然后在 ajax 请求中，我使用data = $.parseJSON(data)。但我认为那是一样的。也许 response() 会更多 laravel 的事情。你觉得怎么样？

$.parseJson 仅在您返回 json 字符串时才有效。这是通过响应 json 方法完成的。其次，response json 还将内容类型设置为application/json。最后始终确保从控制器返回响应或视图，而不是字符串。这是技术上正确的方法:)

好的，谢谢。在过去的两天里，我为这个撞了头。