layui处理表单/按钮进行多次提交

在一个项目中，我们最频繁的操作是CRUD，所以一定有涉及到按钮的操作。比如：确认保存，确认编辑，确认删除等等。所以，为了避免表单进行多次提交就显得特别地重要。

代码实现

知识点

$(':button')
// 选择 type="button" 的 <button> 元素和 <input> 元素

            form.on('submit(saveBtn)', function (data) {

                  var DISABLED = 'layui-btn-disabled';

                  $(':button').addClass(DISABLED); // 添加样式

                  $(':button').attr('disabled', 'disabled');  // 添加属性
                  axios({
                      method:"post"
                  ...

如果请求失败，可以将响应失败移除样式,可再次提交

      $(':button').removeClass(DISABLED);

      $(':button').removeAttr('disabled');

实现效果

点击前



点击后

补充 方法二

如果使用了axios，我们可以设置axios取消某个请求以及全局拦截器阻止重复请求

实现的方法，可以见第二个参考链接

参考链接：

https://www.cnblogs.com/lovebing/p/14041523.html

https://blog.csdn.net/amnesiac666/article/details/112021804