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