如何使用 AJAX 渲染局部？Laravel 5.2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37647212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render partial using AJAX? Laravel 5.2
提问by Matt Catellier
I am in a situation where I want to list information about parking spots that are stored in a MYSQL database. I am using AJAX to make calls to API endpoint (/api/spots) and return a list of spots. I have created a partial view using blade syntax for the layout of the information(partials/Spot.blade.php).
我想列出有关存储在 MYSQL 数据库中的停车位的信息的情况。我正在使用 AJAX 调用 API 端点 (/api/spots) 并返回一个点列表。我已经使用刀片语法为信息布局创建了一个局部视图（partials/Spot.blade.php）。
I am wondering if there is a way to create a controller method that will return a partial view and render it to part of the page, without making a trip back to the server. Is this possible using my partials/Spot.blade.php? Maybe I should create a method to return all the HTML the data in it as a string and the get JS to add that into the DOM?
我想知道是否有一种方法可以创建一个控制器方法，该方法将返回部分视图并将其呈现到页面的一部分，而无需返回服务器。这可以使用我的 partials/Spot.blade.php 吗？也许我应该创建一个方法来将其中的所有 HTML 数据作为字符串返回，然后 get JS 将其添加到 DOM 中？
The way I currently doing it is rendering the partials/Spot.blade.php when the page is initially loaded, and removing it from the screen using CSS. Then after AJAX call to server, I am grabbing the HTML in this hidden partial and using REGEX to place the data in the layout. This seems a little dirty though. Just wondering how other people have solved this problem.
我目前的做法是在页面最初加载时呈现 partials/Spot.blade.php，并使用 CSS 将其从屏幕上移除。然后在对服务器的 AJAX 调用之后，我在这个隐藏的部分中抓取 HTML 并使用 REGEX 将数据放置在布局中。不过这看起来有点脏。只是想知道其他人是如何解决这个问题的。
Your feedback would be greatly appreciated,
您的反馈将不胜感激，
Matt
马特
回答by num8er
It's simple (:
这很简单 （：
Look at this example and make Your own modifications:
看看这个例子并进行你自己的修改：
controller:
控制器：
class StatisticsController extends Controller
{
public function index()
{
return view('statistics.index');
}
public function filter(Request $request, $fields) {
// some calculation here...
return view('statistics.response', compact('stats')); // will render statistics/response.blade.php file with passing results of filter
}
}
views:
意见：
page with date filtering statistics/index.blade.php
带有日期过滤统计信息的页面/index.blade.php
@extends('layouts.billing')
@section('title') Statistics @stop
@section('js_footer')
<script>
function doGet(url, params) {
params = params || {};
$.get(url, params, function(response) { // requesting url which in form
$('#response').html(response); // getting response and pushing to element with id #response
});
}
$(function() {
doGet('/statistics/filter'); // show all
$('form').submit(function(e) { // catching form submit
e.preventDefault(); // preventing usual submit
doGet('/statistics/filter', $(this).serializeArray()); // calling function above with passing inputs from form
});
});
</script>
@stop
@section('content')
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Statistics</h3>
</div>
<div class="panel-body">
<form>
<label>Time</label>
<div class="input-group">
<input type="text" name="time_from" value="{{ date('Y-m').'-01 00:00:00' }}" class="form-control" autocomplete="off">
<input type="text" name="time_to" value="{{ date('Y-m-d H:i:s', time()) }}" class="form-control" autocomplete="off">
</div>
<button type="submit" class="btn btn-sm btn-primary pull-right">
<i class="fa fa-search"></i> Show
</button>
</form>
</div>
</div>
</div>
<div class="col-xs-12">
<div id="response"> HERE WILL BE INJECTED RESULT OF FILTERING </div>
</div>
</div>
@stop
and partial for rendering result of filtering:
和部分渲染过滤结果：
statistics/response.blade.php
统计/response.blade.php
<div class="table-responsive">
<table class="table table-striped table-borderless text-center">
<thead>
<th>ID</th>
<th>Partner</th>
<th>Tariffs</th>
<th>Total</th>
</thead>
<tbody>
@foreach($stats AS $stat)
some data here
@endforeach
</tbody>
</table>
</div>
