我正在使用ajax来验证表单并成功提交后重定向。一切正常，但是如果失败，我将状态代码设置为特定数字以打印祝酒词，该站点将刷新并卡住，而不会显示任何祝酒词。 当我删除显示吐司的行时，一切正常。
这是布局
Rectangle和在layout.toast-message
中<div class="container-fluid">
<div class="m-0 p-0">
<div class="alert-container">@include('layout.toast-message')</div>
{{ $slot}}
</div>
</div>
这是toastmessage（）函数
@if ($errors->any())
<div class="alert alert-danger alert-dismissable fade show {{ session()->get('dismiss', '') }}" data-auto-dismiss="2000">
<i class="fas fa-times-circle toast-icon"></i>
<div class="toast-message">{{ $errors->has('message') ? $errors->first('message', ':message') : __('The given data was invalid.') }}</div>
<i class="fal fa-times close" data-dismiss="alert" aria-label="Close"></i>
</div>
@endif
在ajax失败呼叫上，我将呼叫function toastMessage(url, status, message) {
/* declaring empty data object*/
var data = {};
/* adding status property to data with its value of message */
data[status] = message;
$.ajax({
url: url,
data: data,
cache: false,
context: $('.alert-container')
}).done(function (response) {
/* alert-container to display response */
$(this).html(response);
$(this).show();
});
}
toastMessage(url, status, message)在删除toastmessage（）函数时，网站将刷新并运行良好，因此我认为这与设置影响函数调用的参数有关。
答案 0 :(得分：0)
您可以尝试使用ToastMaker库，使用该库创建的Toast消息不会阻止ui线程。
$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
<button id="mybutton">Show Toast</button>