天天看點

thinkphp6表單重複送出解決辦法

後端(tp6)

表單令牌,感覺不好用。雞肋,特别是ajax送出表單的時候,由于頁面本身就不會更新,導緻token更新不及時,無法送出。

前端限制(推薦)

标志控制

假如你是通過回車送出表單,那麼隻能用這種

按鈕不可點選

是通過按鈕送出的話,可以用這個方法

遮罩層

這個同樣是不能處理回車送出表單,需要再使用 标志控制結合使用。我個人是喜歡用這種方式,這種方式,使用者體驗好一點,會給使用者展示網絡請求的狀态

分别給每次請求單獨設定(推薦)

因為不是所有的網絡請求都是需要這個遮罩層的,一般隻用于表單送出請求。這樣控制比較靈活

下面是全局給jquery給一個提示

隻要是用jquery發送ajax請求就會給出遮罩層

$.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
                    });
                }
            }
        }
    }
});
           

标志控制和按鈕不可點選代碼延時

根據業務情況,可以自己改改

//驗證碼發送标志
        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提示。