阻止AJAX調用，將會有哪些解決方案？

首先，是的，我知道這不是最好的問題。但我不確定我應該尋找什麼參考。所以如果有人會有一個暗示，我會很感激。我想這會是某種模式/反模式引用，但我不確定使用什麼關鍵字來查找適用的關鍵字。阻止AJAX調用，將會有哪些解決方案？

我目前面臨的是用戶必須輸入和提交數據的表單。在用戶提交表單之前，我想驗證一些需要後端調用的數據。爲了做到這一點（並阻止提交），我使用jQuery和$.getJSON/$.ajax來獲取數據。我稍後在處理數據時再次驗證它。這只是爲了給用戶反饋意見。

我不確定每當我目前的做法是否合適。我不知道如何阻止提交，並使用異步調用來驗證從調用中獲得的數據，或者每當我按照這種方式進行時，都要這樣做。另一種選擇是提交表格，驗證數據，並讓用戶回到表單上，提供有關錯誤的信息。這樣做的缺點是需要「沉重的」負載。

那麼我能做些什麼來使用異步AJAX調用來阻止提交，直到我驗證了數據？
我應該這樣做還是應該在提交表單之前提交表單並驗證/拒絕該表單？

編輯弄清楚它不是一個重複：

這裏是我使用的檢查輸入值之前提交當前功能。正如你所看到的，如果檢測到錯誤，它只會中止/中斷提交。我正在使用$.ajax而不是$.getJSON，因爲它是阻止的。通常情況下，這不應該產生巨大的影響，因爲查詢速度很快，這可能會「足夠好」，但我覺得應該可以做得更好。

$("form").submit(function(event){ 
    abortSubmit = false; 

    telephonePattern = new RegEx("^[0-9, ,\\-,+]*$") 
    if(telephonePattern.test($("#inputTelephone").value) == false){ 
     abortSubmit = true; 
     $("#helptext").text("The telephone field contains invalid numbers"); 
    } 

    userExists = false; 

    $.ajax({ 
     url: "<url>", 
     dataType: "json", 
     async: false, 
     data: { user: $("#inputUsername").value } 
    }).done(
     function(json){ 
      userExists = json; 
     } 
    ) 

    if(userExists.length > 0){ 
     abortSubmit = true; 
     $("#helptext").text("That username already exists!"); 
    } 

    if(abortSubmit){ 
     return false; 
    } 
});

來源

2017-04-19 Seth

[如何防止表單被提交？]（http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted） –

您可以隱藏提交按鈕，當所有後端請求都成功時，檢查用戶鍵入的值並顯示/啓用提交按鈕。或者你可以通過ajax使整個提交異步。或者設置某種變量。你有很多選擇。嘗試達到最佳的用戶體驗。 – DanFromGermany

謝謝@Shree，但我能夠阻止提交。更像丹指出用戶體驗或最佳實踐問題。我知道這不是最好的平臺，但我不確定我會怎麼做。 – Seth

$('.foo').on('click', function(e) { 
    var validated_form = validateForm($(this).closest('form')); 

    if (!validated_form) { 
     e.preventDefault(); 
     // display validation messages, tooltips, etc 
    }; 
});

包含.foo是提交按鈕

我假設你有一個前端驗證功能（在這個例子中，它會被命名爲validateForm）這需要在表格jQuery對象。在這種情況下，它應該返回true（如果一切正常）或false（如果事情不好）。如果事情不好，它不會提交表格。如果他們沒問題，它會提交表格

如果你絕對必須在後端進行驗證，那麼你仍然可以使用preventDefault並通過ajax發送表單，驗證它，然後發送一個響應。如果表單正常，您可以觸發自定義事件，然後自動提交表單（通過事先爲該特定事件創建事件偵聽器）。如果表單不正常，您可以再次觸發自定義事件（不同的事件）並顯示驗證消息和其他內容。

來源

2017-04-19 11:45:01

你應該一直這樣做。畢竟這是前端代碼。禁用JS或完全拋棄瀏覽器並提交任何你想要的。 ;）第二點很有趣，給了我更多的想法。 – Seth

@Seth，我的意思是，如果您絕對必須只做後端驗證，並且無法在FE上驗證用於UX目的的事情。我同意你也應該在後臺執行它，即使在重新提交之後 - 在這種情況下，如果你禁用了JS，那麼它會將整個表單提交給BE。但是有些東西可以再次用於UX的目的，很容易在FE上驗證。在表格的實際發佈後，應該再次在BE上進行驗證。至於第二部分 - 如果沒有事件觸發器和監聽器，可能更乾淨，只需執行基於xhr狀態或數據的適當函數;）實際上取決於您的代碼。 –

阻止AJAX調用，將會有哪些解決方案？

回答

相關問題