要在 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'));
}
}
就是这样,您的刀片“容器”现在将在您单击按钮时重新加载,并且您正在呈现的集合的任何更改都应该在不重新加载页面的情况下更新。
希望这能填补其他答案中留下的一些空白。我希望它对你有用。