ajax后Laravel刷新数据
Posted
技术标签:
【中文标题】ajax后Laravel刷新数据【英文标题】：Laravel refresh data after ajax 【发布时间】：2016-10-07 23:42:35 【问题描述】：他目前正在编写必须过滤表中数据的代码。 Ajax 将调用该链接并获取带有答案的响应 (json) 结果。但是，我遇到了一个问题。我必须以某种方式呈现表格，我不想通过附加等来做到这一点。
我能否以某种方式再次生成视图或刀片文件？
默认视图是 DefController@index 但 ajax 使用 url 哪个控制器是 DefController@gettabledata。
public function gettabledata($id)
return response()->json(Def::find($id)->getallmy->all());
【问题讨论】：
【参考方案1】：要在 Laravel 5.4 中更新和更改页面内容而不重新加载页面，我执行以下操作：
首先在名为“container.blade.php”的“views”文件夹中创建刀片视图，它将包含以下代码（在本例中是一个选择框，它呈现来自包 Bouncer 的能力列表（但您可以在你喜欢的任何 Laravel 集合上使用 @foreach）：
<select>
$abilityList = Bouncer::role()::where('name','admin')->first()->getAbilities()->pluck('name')
@foreach ( $abilityList as $ab )
<option value=" $ab "> $ab </option>
@endforeach
</select>
将此添加到您的主刀片文件（例如 home.blade.php）中，确保使用具有您可以引用的 id 的 div：
<div id="abilityListContainer">
@include('container')
</div>
现在在您的主要刀片文件（例如 home.blade.php）上添加一个按钮，该按钮将触发与 Laravel 控制器通信的功能：
<input type="button" value="reload abilities" onClick="reloadAbilities()"></input>
然后为这个函数添加 javascript，这会将生成的 html 加载到您的 div 容器中（注意“.get”旁边的“/updateAbility”路由 - 这是我们将在下一步中设置的 Laravel 路由） ：
var reloadAbilities = function()
var $request = $.get('/updateAbility', value: "optional_variable", function(result)
//callback function once server has complete request
$('#abilityListContainer').html(result.html);
);
现在我们为这个动作设置 Laravel 路由，它引用我们的控制器并调用函数“updateAbilityContainer”。因此，编辑您的 /routes/web/php 文件以获得以下路由：
Route::get('updateAbility', array('as'=> 'updateAbility', 'uses'=>'AbilityController@updateAbilityContainer'));
最后在 app/Http/Controllers 中创建文件“abilityController.php”（你也可以使用“php artisan make:controllerabilityController”）。现在添加此函数来处理更改，生成 html 并将其返回给 javascript 函数（注意您可能还必须使用命名空间）：
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
class AbilityController extends Controller
public function updateAbilityContainer()
// use this if you need to retrieve your variable
$request = Input::get('value');
//render and return the 'container' blade view
$html = view('container', compact('view'))->render();
return response()->json(compact('html'));
就是这样，您的刀片“容器”现在将在您单击按钮时重新加载，并且您正在呈现的集合的任何更改都应该在不重新加载页面的情况下更新。
希望这能填补其他答案中留下的一些空白。我希望它对你有用。
【讨论】：
【参考方案2】：答案是肯定的，你可以。 Webinan 无疑为您指明了正确的方向。这种方法略有不同。
首先，您需要一个单独的表格视图。 HTML 标记的一个非常基本的示例：
<div class="table-container">
@include('partials.table') // this view will be async loaded
</div>
我们首先使用 shorthand ajax function:var $request = $.get('www.app.com/endpoint'); 使用 jQuery（也可以使用 Javascript）调用服务器。您还可以将任何数据传递给后端的控制器。
现在在服务器端，在您的控制器中，渲染并返回表格视图：
class EndpointController extends Controller
/**
* Returns a rendered table view in JSON format.
*
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function ajax(Request $request)
$html = view('partials.table', compact('view'))->render();
return response()->json(compact('html'));
如果一切顺利，done 回调将被触发。只需抓取 html 变量并将其设置为表格容器的内容。
function renderTable()
var $request = $.get('www.app.com/endpoint'); // make request
var $container = $('.table-container');
$container.addClass('loading'); // add loading class (optional)
$request.done(function(data) // success
$container.html(data.html);
);
$request.always(function()
$container.removeClass('loading');
);
希望这会有所帮助！
【讨论】：
谢谢，但是这种方法如何正确使用分页器呢？【参考方案3】：您可以将模板中与表格对应的部分放在单独的.blade.php 文件中，并将@include 放在主布局中。
main.blade.php：
<html>
...
<body>
<div class="table-container">
@include('table')
</div>
</body>
...
和
table.blade.php:
<table>
@foreach($rows as $row)
<tr>
<td> $row->title ... </td>
</tr>
@endforeach
</table>
通过这种方式，您可以使用简单的 jQuery $('div.table-container').load(url)，然后在您的服务器上将该部分呈现并响应为 html 字符串。 return view('table', $data)
Javascript：
function refreshTable()
$('div.table-container').fadeOut();
$('div.table-container').load(url, function()
$('div.table-container').fadeIn();
);
【讨论】：
可以使用 $.ajax 或 $.get 或更多来扩展吗？当然，我想添加一个微调器。但主要是他希望它被扩展，这可能是一个坏方法。 这是要走的路，但您应该返回一个带有 JSON 的渲染视图：$html = view('partials.table', $data)->render(); return response()->json(compact('html'));。
@JasonK 然后我不能使用jQuery.load() ！
@bradley546994 我已经编辑了答案，你可以有淡出/淡入效果。
我将很快发布另一种（替代）方法。以上是关于ajax后Laravel刷新数据的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 8 和 Ajax - 将数据插入表中总是刷新加载
Laravel/Ajax：刷新表格将新数据堆叠在底部（旧数据保留）