重新路由Laravel后,防止重新加载页面表单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重新路由Laravel后,防止重新加载页面表单相关的知识,希望对你有一定的参考价值。

我正在实施帐户验证,部分内容正在重新发送电子邮件验证。

<a href="/register/resend/{{ $objUser->id }}">@lang('localization.clickHere')</a>@lang('localization.toResendEmail')

路线/网络

Route::get('register/resend/{id}','AuthVerificationController@resend');

调节器

public function resend($id, Request $request)
{   
    $user = User::where('id',$id)->firstOrFail();
    Mail::to($user->email)->queue(new ConfirmRegistration($user));

    $messenger = new Messenger($user);
    $messenger->sendSuccess(__(trans('localization.emailSentSuccessfully')));

    return back();
} 

我遇到的问题是,每当我触发href时页面都会重新加载(如预期的那样),这会导致Controller发送的消息立即消失。

有没有办法阻止页面重新加载,但仍然触发route?我尝试添加onclick="return false;",但这似乎阻止resend功能运行。

答案

为什么不使用Ajax调用呢?

html

<a href="javascript:void(0)" onclick="mailme(this)" user-id="{{ $objUser->id }}">@lang('localization.clickHere')</a>@lang('localization.toResendEmail')

路线:

Route::get('register/resend','AuthVerificationController@resend');

控制器:

public function resend(Request $request)
{   
    $user = User::where('id',$request->id)->firstOrFail();
    Mail::to($user->email)->queue(new ConfirmRegistration($user));

    $messenger = new Messenger($user);
    $messenger->sendSuccess(__(trans('localization.emailSentSuccessfully')));

    return response()->json('success');
} 

JS(没有JQuery):

mailme = function(obj){
  var userID = obj.getAttribute('user-id')
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };
  var params = JSON.stringify({ id: userID });

  xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");
  xhttp.setRequestHeader("Content-length", params.length);
  xhttp.setRequestHeader("Connection", "close");

  xhttp.open("GET", '{{url("settings/register/resend")}}', true);

  xhttp.send(params);
}

JS(JQuery):

mailme = function(obj){
    var userID = $(obj).attr('user-id')
    $.ajax({
        type : 'Get',
        data : {
            id: userID
        },
        url : '{{url("settings/register/resend")}}',
        dataType : 'json',
        success: function(data){
            console.log(data)
        }
    });
}

这样,您将触发该功能,而无需重新加载页面以将请求发送到服务器。请求通过xhttp发送

以上是关于重新路由Laravel后,防止重新加载页面表单的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Ajax 加载过滤后的数据,而无需在 laravel 中重新加载整个页面

防止在 django 中提交按钮后重新加载

防止页面重新加载表单按钮点击流星?

如何修复页面重新加载相同的表单提交与laravel

如何在 Laravel 中提交 PUT 方法表单而不重新加载页面?

从验证重新加载页面后,带有 Select2 的 Laravel 输入值不会持续存在