在laravel集体中提交表单时显示加载器

问题描述

我直接提交表单而不使用 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);
    }
}

一切正常，但我想在收到后端响应时显示加载程序。请给我一个更好的解决方案。

解决方法

你可以在 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();
        })

这感觉就像你在撒谎。 Spinner 通常处理 ajax 请求，因为 Spinner 提供操作正在进行的视觉反馈。作为 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。

laravel laravel laravel-form