无需重新加载页面即可更改/更新页面内容 - 通过 AJAX Laravel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27673115/
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
change/update page content without reloading page - by AJAX Laravel
提问by Peter
I have a simple view, which displays results of a query
我有一个简单的视图，它显示查询的结果
$number = 5;
$events = Event1::has('users', '<', 1)->latest()->take($number)->get();
TASK:Now I want to create some filter and sorting methods... and be able to refresh the displayed results without page reload
任务：现在我想创建一些过滤和排序方法......并且能够在不重新加载页面的情况下刷新显示的结果
In my view file I have this:
在我的视图文件中，我有这个：
<div id="top5-list">
@foreach($events as $event)
///
@endforeach
</div>
**
**
TO DO
去做
** I wish to implement the below scenarios, if possible working in the same VIEW:
** 我希望实现以下场景，如果可能的话，在同一个视图中工作：
SCENARIO 1)using the same query, but change the value of parameters - just like in the example above - the variable $number changes the number of displayed results.
场景 1)使用相同的查询，但更改参数的值 - 就像上面的示例一样 - 变量 $number 更改显示结果的数量。
Most preferably I'd wish to use more than one variable
最好我希望使用多个变量
SCENARIO 2)build a separate query for each user-selectable viewing mode - for example
场景 2)为每个用户可选择的查看模式构建一个单独的查询 - 例如
filter named: show top- refreshes the content with this query:
过滤器命名：show top- 使用此查询刷新内容：
$events = Event1::has('users', '<', 1)->latest()->take($number)->get();
and filter named show best- refreshes the content with results of this completely rebuilt query:
和名为 show best 的过滤器- 用这个完全重建的查询的结果刷新内容：
$events = Event1::whereHas('users', function($q){
$q->where('importance', 0);})->get();
Scenario 2-A
场景 2-A
In one view I will have a top-10 list of more than one item, for example TOP 5 EVENTS and TOP 5 ENTITIES side by side
在一个视图中，我将有一个包含多个项目的前 10 名列表，例如 TOP 5 EVENTS 和 TOP 5 ENTITIES 并排
My desired function: by pressing a button the queries responsible for displaying the top-5 would be changed from, for instance switching from "top-5-most important"
我想要的功能：通过按下按钮，负责显示前 5 名的查询将被更改，例如从“前 5 名最重要”切换
$events = ...query_1...
$entities = ...query_1...
into "top-5-most popular"
进入“最受欢迎的前 5 名”
$events = ...query_2...
$entities = ...query_2...
SCENARIO 3)My ltimate goal is to build a filter which might sort out Books on-the-fly by clicking none, one, or many genres. Just as my other question demonstrates: how to filter records filtered by more than one criterion in pivot table - laravel eloquent collections
场景3)我的最终目标是构建一个过滤器，它可以通过单击无、一个或多个流派来即时对书籍进行分类。正如我的另一个问题所展示的那样：如何在数据透视表中过滤由多个条件过滤的记录 - laravel eloquent collections
回答by Peter
Ok, it was quite simple.
好吧，这很简单。
In your VIEW file you need to define a DIV (or any element) with a iddefined, for example id="list_records"
在您的 VIEW 文件中，您需要定义一个 DIV（或任何元素）id，例如id="list_records"
<div id="list_records">
// it can be empty or you can put a loading gif file
</div>
Now you need to define a route in routes.php To make these instructions simpler, I put the code in the route definition, however it should be put in a controller method.
现在你需要在 routes.php 中定义一个路由 为了使这些说明更简单，我把代码放在路由定义中，但是它应该放在一个控制器方法中。
Route::get('a-test', function() {
$rnd = rand(1, 5); // varying number erves as a marker to show it works
$posts= Posts::
->take($rnd)
->get();
return View::make('experiments.testa', compact('top5events','rnd','posts'));
});
As you see, you need to create a VIEW file: VIEWS/EXPERIMENTS/testa.blade.php
如您所见，您需要创建一个 VIEW 文件：VIEWS/EXPERIMENTS/testa.blade.php
Content of the file:
文件内容：
{{ $rnd or 'random variable is missing!'}}
// a feedback for beginners: will show that the AJAX is working even if the loop count would be zero records.
@foreach($postsas $post)
<p>{{ $post->title}}</p> // just to print something
@endforeach
Now within your main view file you have to put some JS:
现在在您的主视图文件中，您必须放置一些 JS：
{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js') }}
<script type="text/javascript">
function myFunction() {
函数 myFunction() {
$("#list_records").toggleClass( "csh_12" )
$('#list_records').load('a-test');
}
</script>
Note: the toggleClass is used to let you see that JS is working and JQuery is properly loaded. You need to define the CSS class csh_12 in your CSS file. Example:
注意：toggleClass 用于让您看到 JS 正在运行以及 JQuery 是否正确加载。您需要在 CSS 文件中定义 CSS 类 csh_12。例子：
.csh_12 {background: red;}
Now you need a button to trigger the reloading:
现在您需要一个按钮来触发重新加载：
<button id="demo" onclick="myFunction()">Refresh the list</button>
That's it! Now the floor is yours!
就是这样！现在地板是你的！
