更改/更新页面内容而不重新加载页面-通过AJAX Laravel

Question

我有一个简单的视图，它显示查询的结果。

$number = 5;
$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

任务：现在我想创建一些过滤器和排序方法..。并且能够刷新显示的结果，而无需重新加载页面。

在我的视图文件中，我有以下内容：

<div id="top5-list">
@foreach($events as $event)
 ///
@endforeach

</div>

**

去做

** 我希望实现以下场景-，如果可能的话，在相同的视图中工作：

场景1)使用相同的查询，但是更改参数的值--就像上面的例子一样--变量$number更改显示结果的数量。

最好我希望使用多个变量

场景2)为每个用户可选择的查看模式构建一个单独的查询，例如

过滤器命名:显示顶部-使用此查询刷新内容：

$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

名为show 的过滤器-用这个完全重新构建的查询的结果刷新内容：

$events = Event1::whereHas('users', function($q){
$q->where('importance', 0);})->get();

设想2-A

在一个视图中，我将有一个包含多个项目的前10位列表，例如前5项事件和并排排列的前5项实体。

我想要的功能:按下按钮，负责显示top-5的查询将从“top-5-最重要”切换到“top-5”。

$events = ...query_1...
$entities = ...query_1...

变成“最受欢迎的五强”

$events = ...query_2...
$entities = ...query_2...

场景3)我的最终目标是构建一个过滤器，它可以通过单击“无”、“一”或“多个类型”来快速整理图书。正如我的另一个问题所显示的：how to filter records filtered by more than one criterion in pivot table - laravel eloquent collections

Answer 1

好吧，很简单。

在视图文件中，需要定义具有id的DIV (或任何元素)，例如id="list_records"。

<div id="list_records">
     // it can be empty or you can put a loading gif file
</div>

现在您需要在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'));
});

如您所见，您需要创建一个视图文件:视图/实验/testa.blde.php

文件内容：

{{ $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

现在，在您的主视图文件中，您必须放置一些JS：

{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js') }}

<script type="text/javascript">

函数myFunction() {

$("#list_records").toggleClass( "csh_12" )
$('#list_records').load('a-test');
}
</script>

注意: toggleClass用于让您看到JS正在工作，并且正确加载了JQuery。您需要在CSS文件中定义CSS类csh_12。示例：

.csh_12 {background: red;}

现在您需要一个按钮来触发重新加载：

<button id="demo" onclick="myFunction()">Refresh the list</button>

就这样!现在地板是你的了！