根据 ajax 请求呈现多个 blade 视图部分
Render multiple blade view sections on ajax request
当请求为 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>
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);
});
当请求为 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>
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);
});