# 后端(tp6) 表單令牌，感覺不好用。雞肋，特別是ajax提交表單的時候，由于頁面本身就不會更新，導致token更新不及時，無法提交。 # 前端限制(推薦) ## 標志控制 假如你是通過回車提交表單，那么只能用這種 ## 按鈕不可點擊 是通過按鈕提交的話，可以用這個方法 ## 遮罩層 這個同樣是不能處理回車提交表單，需要再使用 標志控制結合使用。我個人是喜歡用這種方式，這種方式，用戶體驗好一點，會給用戶展示網絡請求的狀態 ### 分別給每次請求單獨設置(推薦) 因為不是所有的網絡請求都是需要這個遮罩層的，一般只用于表單提交請求。這樣控制比較靈活 ### 下面是全局給jquery給一個提示 只要是用jquery發送ajax請求就會給出遮罩層 ~~~bash $.ajaxSetup({ timeout: 30000, //超時時間:30秒 headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, beforeSend: function (xhr) { if ($('.mask').length == 0) { let fdsf = ` <div class="mask"> <div style="color: #f4696b" class="la-line-spin-fade-rotating la-2x"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> `; $(fdsf).prependTo('body'); } }, //請求完畢事件 complete: function (xhr, status) { //不管請求成功還是失敗，都把這個遮罩層給刪除 $('.mask').remove(); //超時timeout,還有success,error等值的情況 if (status === 'timeout') { xhr.abort()// 超時后中斷請求 Toast.fire({ icon: 'error', title: "請求超時~" }); } else { let text = xhr.responseText; if (isJSON(text)) { let res = JSON.parse(text); if (res.code === 419) { Toast.fire({ icon: 'error', title: res.msg }); } } } } }); ~~~ ## 標志控制和按鈕不可點擊代碼延時 根據業務情況，可以自己改改 ~~~javascript //驗證碼發送標志 let send_flag = false; //發送驗證碼觸發點擊事件 $('.send-btn').on('click', function () { //當前按鈕jq對象 let $send_btn = $(this); if (send_flag) return; send_flag = true; //讓按鈕不可點擊 $send_btn.attr('disabled', true); //獲取表單序列化數據 let data = $('.form').serialize(); //發送ajax發送郵箱驗證碼 $.ajax({ url: "<{url('/validate/email/send')}>", type: 'POST', data, dataType: 'json', success: function (res) { //標志恢復 send_flag = false; //讓按鈕可以點擊 $send_btn.attr('disabled', false); } }) }); ~~~ # 總結 同時推薦，所有的表單提交都通過ajax來完成，原因是，如果是傳統的表單提交，那么后端驗證不通過，就會再次返回添加頁面(頁面進行了跳轉)，如果不處理已填數據的回顯，那么如果表單特別多的情況下，用戶會非常反感。 所以，我們推薦用ajax的提交方式，驗證不通過，直接js提示