我直接提交表单而不使用 Ajax 请求，我想在从后端获得响应时显示加载程序。 怎么可能？
{!! Form::open(['route' => ['patient_signup'], 'method' => 'post', 'name' => 'sign_up_form']) !!}
在控制器中
public function patient_signup()
{
if ($result) {
return redirect(route('home'))->with('success', $message);
} else {
return Redirect::back()->withInput()->with('error', $message);
}
}
一切正常，但我想在从后端获得响应时显示加载器。 请给我一个更好的解决方案。
【问题讨论】：
标签： laravel laravel-form
你可以像下面这样在body标签之后添加div标签
<body>
<div class="pageLoader" id="pageLoader"></div>
在css中
.pageLoader{
background: url(../images/loader.gif) no-repeat center center;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
background-color: #ffffff8c;
}
然后在 JavaScript 中
$(window).on('beforeunload', function(){
$('#pageLoader').show();
});
$(function () {
$('#pageLoader').hide();
})
更新
return redirect(route('home'))->with('success', $message)->with('loader',true);
然后在 JavaScript 中
$(window).on('beforeunload', function(){
@if(isset($loader))
$('#pageLoader').show();
@endif
});
$(function () {
$('#pageLoader').hide();
})
【讨论】：
感觉你有点在捏造这个。微调器通常与 ajax 请求一起使用，因为微调器提供了操作正在进行的视觉反馈。浏览器已将request 的操作发送到服务器，现在浏览器正在等待response。需要 response 才能移除微调器（response 也可能是失败或超时等），并且无需刷新页面即可移除微调器。
在您的用例中，来自服务器的response 实际上是将用户重定向到另一个页面，或者返回到有错误的表单页面。
所以基本上你想要做的是有一个loading 指示符（微调器、单词等），它最初是hidden，你在提交表单时显示，如果用户被重定向回来，它会自动消失到您的表单页面。
举个例子：
<div class="relative grid place-items-center h-screen">
<form id="some-form">
<button id="form-submit" class="px-4 py-2 bg-gray-800 rounded text-white">Submit</button>
</form>
<div id="loader" class="hidden" style="display: none">
Loading ...
</div>
</div>
然后你的javascript：
let form = document.querySelector('#some-form');
let loader = document.querySelector('#loader')
form.addEventListener('submit', function (event) {
event.preventDefault();
// using non css framework method with Style
loader.style.display = 'block';
// using a css framework such as TailwindCSS
loader.classList.remove('hidden');
// pretend the form has been sumitted and returned
setTimeout(() => loader.style.display = 'none', 1000);
});
你可以使用jQuery 或任何你想要的，但你明白了。示例jsFiddle here。
【讨论】：