在ajax之后Laravel刷新数据



他目前正在编写必须过滤表中数据的代码。Ajax将调用链接,并获得带有答案的响应(json)结果。然而,我遇到了一个问题。我必须以某种方式渲染表,我不想通过附加等来做到这一点

我能以某种方式再次生成视图或刀片文件吗?

默认视图为DefController@index但是ajax使用url,控制器是DefController@gettabledata.

public function gettabledata($id){
return response()->json(Def::find($id)->getallmy->all());
}

您可以将模板中与表对应的零件放在单独的.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();
});
}

答案是肯定的,你可以。韦比南无疑为你指明了正确的方向。这种方法略有不同。

首先,你需要一个单独的表视图。HTML标记的一个非常基本的例子:

<div class="table-container">
@include('partials.table') // this view will be async loaded
</div>

我们首先使用jQuery调用服务器(也可以使用Javascript),使用简写的ajax函数:var $request = $.get('www.app.com/endpoint');。您还可以将任何数据传递给后端的控制器。

现在在服务器端,在控制器中,渲染并返回表视图:

class EndpointController extends Controller
{
/**
* Returns a rendered table view in JSON format.
* 
* @param  Request $request
* @return IlluminateHttpJsonResponse
*/
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');
});
}

希望这能有所帮助!

要在不重新加载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:controller abilityCntroller")。现在添加这个函数来处理更改,生成html并将其返回到javascript函数(注意,您可能还必须使用名称空间):

namespace AppHttpControllers;    
use IlluminateHttpRequest;
use IlluminateSupportFacadesInput;
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'));
}
}

仅此而已,当您单击按钮时,您的刀片"容器"将重新加载,并且对您正在渲染的集合的任何更改都应该在不重新加载页面的情况下更新。

希望这能填补其他答案中的空白。我希望它对你有用。

最新更新