предотвратить дублирование отправки

внешний интерфейс

Введение

В текущей веб-разработке мы часто используем ajax для получения данных из серверной части и отправки данных. Для некоторых любителей игр или студентов с очень быстрыми руками кнопка может вызвать событие щелчка несколько раз. Опытные фронтенд-разработчики обязательно будут использовать метод антидупликации отправки, чтобы избежать дублирования отправки данных. Опытные бэкенды будут добавлять номер версии видения каждый раз, когда отправляют данные. Если серверная часть добавляет номер версии для проверки, веб-интерфейс должен увеличивать поле номера версии при каждой отправке. Поэтому лучше передать его отличникам фронтенда, чтобы предотвратить повторную отправку! Сейчас я поделюсь с вами методом, которым пользуюсь.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>防止ajax重复提交</title>
    </head>
    <body>
        <button id="btn">提交</button>
        <script>

            /**
             * 模拟ajax提交
             * @fn 回调函数
             * */
            function Ajax(fn){
                setTimeout(function(){
                    var data= {result:true,msg:'提交成功！'};
                    fn(data);
                },2000);
            }
            /**
             * btn click 提交事件
             * 
             * */
            btn.onclick=function(){
                //检查 按钮是否被锁住，锁住直接rerun
                if(btn.getAttribute('lock')){
                    return;
                }
                //上锁
                btn.setAttribute('lock',1);
                //更改状态
                btn.innerText='提交中...';
                //模拟ajax提交
                Ajax(function(data){
                    //请求成功
                    if(data.result){
                        console.log('请求成功');
                        //请求成功解锁
                        btn.setAttribute('lock',"");
                        //还原状态
                        btn.innerText='提交';
                    }else{
                        console.log('请求失败');
                        //请求失败解锁
                        btn.setAttribute('lock',"");
                        //还原状态
                        btn.innerText='提交';
                    }
                });
            }
        </script>
    </body>
</html>

Логическая идея:
1. Перед отправкой данных определите, есть ли блокировка на текущей кнопке отправки
2. Заблокируйте кнопку отправки перед отправкой ajax
3. Разблокировать после успеха или неудачи ajax
демонстрационное соединениепесочница. Запустите строительство. Талант /show/3 на самом деле очень естественный...

Суммировать

Предотвращение дублирования отправки очень практично при разработке, я надеюсь, что это может вам помочь.

Категории