Web Api只允許提交表單一次

Question

我在我的MVC項目中使用web api，並遇到了問題，如果用戶在創建頁面上......填寫表單並提交提交..在處理時間內，用戶可以連續點擊提交按鈕進行多項創作。

我的目標

只允許用戶一次提交表單。基本上，用戶點擊後，或點擊鍵盤輸入或用戶提交表格..它應該只允許1次。

我研究了this。

但我該如何實現？這是我到目前爲止：

<input id="Edit-Btn-Submit" type="submit" value="Save" class="btn btn-primary" /> 

$("form").data("validator").settings.submitHandler = 
    function(form) { 

     $.ajax({ 
      method: "PUT", 
      url: infoGetUrl + itemId, 
      data: $("form").serialize(), 
      beforeSend: function() { 
       disableSendButton(); 
      }, 
      complete: function() { 
       enableSendButton(); 
      }, 
      success: function() { 
       toastr.options = { 
        onHidden: function() { 
         window.location.href = newUrl; 
        }, 
        timeOut: 3000 
       } 
       toastr.success("Equipment successfully edited."); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
       var status = capitalizeFirstLetter(textStatus); 
       var error = $.parseJSON(jqXHR.responseText); 
       //console.log(error); 
       var modelState = error.modelState; 
       //console.log(error.modelState); 
       $.each(modelState, 
        function(key, value) { 
         var id = ""; 
         if (key === "$id") { 
          id = "#" + 
           key.replace('$', '').substr(0, 1).toUpperCase() + 
           key.substr(2); 
         } else { 
          id = "#" + 
           key.replace('$', '').substr(0, 1).toUpperCase() + 
           key.substr(1); 
          var status = capitalizeFirstLetter(textStatus); 
          toastr.error(status + " - " + modelState[key]); 
         } 
         var input = $(id); 
         console.log(id); // result is #id 
         if (input) { // if element exists 
          input.addClass('input-validation-error'); 
         } 
        }); 
      } 
     }); 
    } 

function capitalizeFirstLetter(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
} 

function disableSendButton() { 
    $('#Edit-Btn-Submit').prop('disabled', true); 
} 

function enableSendButton() { 
    $('#Edit-Btn-Submit').prop('disabled', false); 
} 
}); 

任何幫助表示讚賞。

Answer 1

我解決您的問題的方法是禁用該按鈕，直到請求完成。這可以防止用戶發送垃圾郵件。你也可以選擇做別的事情，而不是像隱藏它那樣禁用按鈕。

在下面的代碼應禁用按鈕時AJAX請求開始和重新啓用它一旦結束（成功或失敗，並不重要）。

您可以參考this page更多的信息有關的事件和handleres發射/與JQuery的Ajax對象訪問。

$("form").data("validator").settings.submitHandler = 
    function(form) { 
     $.ajax({ 
      method: "PUT", 
      url: infoGetUrl + itemId, 
      data: $("form").serialize(), 
      beforeSend: function() { 
       disableSendButton(); 
      }, 
      complete: function() { 
       enableSendButton(); 
      }, 
      success: function() { /* code */ }, 
      error: function(jqXHR, textStatus, errorThrown) { /* code */} 
     }); 
    }; 
function disableSendButton() 
{ 
    $('input').prop('disabled', true); 
} 
function enableSendButton() 
{ 
    $('input').prop('disabled', false); 
} 

Answer 2

您可以使用「beforeSend」事件調用之前禁用按鈕，然後啓用它的「成功」事件。

$.ajax({ 
    method: "PUT", 
    url: infoGetUrl + itemId, 
    data: $("form").serialize(), 
    beforeSend: function() { 
     $('#buttonId').prop('disabled', true); 
    }, 
    success: function() { 
     $('#buttonId').prop('disabled', false); 
     //some code here 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     alert("Error during communication with the service, try later"); 
     $('#buttonId').prop('disabled', false); 
     //some other code 
    } 
});