在 laravel 集体中提交表单时显示加载器
Posted
技术标签:
【中文标题】在 laravel 集体中提交表单时显示加载器【英文标题】：Show Loader when submitting form In laravel collective 【发布时间】：2021-08-19 13:32:14 【问题描述】：我直接提交表单而不使用 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);
一切正常，但我想在从后端获得响应时显示加载器。 请给我一个更好的解决方案。
【问题讨论】：
【参考方案1】：你可以像下面这样在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();
)
【讨论】：
是的，如果您仍然需要 on submssion 那么您可以传递查询参数，例如 ?loader=true 然后您需要在 jquery 中处理它 这个可以，但不能按照我想要的方式工作。谢谢您的回复。【参考方案2】：感觉你有点在捏造这个。微调器通常与 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。
【讨论】：
想要显示 Spinners，因为提交表单时它会在背面向用户发送 3 封邮件，因此需要时间。 @AnkitaDobariya 没关系，我没有判断力。您使用某些东西的理由取决于您。我的解决方案是工作流的一个基本示例，具体实现（使用微调器图形、样式等）取决于您。以上是关于在 laravel 集体中提交表单时显示加载器的主要内容，如果未能解决你的问题，请参考以下文章