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