在不重新加载页面的情况下更改/更新页面内容 - 通过 AJAX Laravel答案

【问题标题】：change/update page content without reloading page - by AJAX Laravel在不重新加载页面的情况下更改/更新页面内容 - 通过 AJAX Laravel
【发布时间】：2015-02-24 17:01:34
【问题描述】：

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

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

任务： 现在我想创建一些过滤和排序方法......并且能够在不重新加载页面的情况下刷新显示的结果

在我的视图文件中，我有这个：

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

</div>

要做的事情

** 我希望实现以下场景，如果可能的话，在同一个 VIEW 中工作：

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

最好我希望使用多个变量

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

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

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

and filter named show best - 用这个完全重建的查询的结果刷新内容：

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

场景 2-A

例如，在一个视图中，我将有一个包含多个项目的前 10 个列表 TOP 5 EVENTS 和 TOP 5 ENTITIES 并排

我想要的功能：通过按下按钮，负责显示前 5 名的查询将被更改，例如从“前 5 名最重要”切换

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

进入“最受欢迎的前 5 名”

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

场景 3) 我的最终目标是构建一个过滤器，该过滤器可以通过单击无、一种或多种类型来即时对图书进行分类。正如我的另一个问题所表明的那样：how to filter records filtered by more than one criterion in pivot table - laravel eloquent collections

【问题讨论】：

标签： jquery ajax laravel

【解决方案1】：

好的，这很简单。

在您的 VIEW 文件中，您需要定义一个带有 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'));
});

如您所见，您需要创建一个 VIEW 文件：VIEWS/EXPERIMENTS/testa.blade.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>

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

【讨论】：