jQuery - AJAX表單雙提交

所以，我有這個提交處理程序。請求發出時，我已經將表單配置爲指向多部分資源URL（它指的是一個對象和一個子對象，每個對象都有指定的ID，作爲路徑的一部分）。每當我提交表單時，它不僅提交了預期的請求，還提交了第二個請求，其中包含從請求URL中刪除的子對象的ID和名稱。jQuery - AJAX表單雙提交

TL; DR：它向/foo/1/bar/2發送請求，然後/foo/1，我需要它停止發出第二個請求。

我已經使用標準event.preventDefault()並拋出return false爲好措施。在這裏沒有看到，但我也嘗試$form.submit(false)正如我在另一個SO回答某處看到的，但由於它看起來不好，並沒有工作，刪除它。

function submitForm(e) { 
    e.preventDefault(); 

    var $form = $(e.target); 

    $form.find('[type="submit"], [type="button"]').prop('disabled', true); 

    var formData = { 
     // data 
    }; 

    $.ajax({ 
     url: $form.prop('action'), 
     method: ($form.find('[name="_method"]').val() || $form.prop('method')), 
     data: formData, 
     error: function(response, status) { 
      console.log(response); 
     }, 
     success: function(response, status) { 
      console.log(response); 
     }, 
     complete: function() { 
      $form.find('[type="submit"], [type="button"]').prop('disabled', false); 
     } 
    }); 

    return false; 
} 

$(document).ready(function(){ 
    $('#myform').on('submit', submitForm); 
});

我確定在AJAX調用的某處出現問題，因爲刪除它會導致表單提交按預期停止。我想這也可能是AJAX調用本身實際上提出了兩個請求，但是爲什麼它會這麼做沒有意義。它似乎也會發生用戶是否按下回車鍵或主動點擊提交按鈕。

來源

2017-01-04 Dissident Rage

我並沒有仔細觀察我收到的回覆，因爲我對於發現兩個傳出HTTP請求的事實感到如此緊張。

第一個請求返回了一個3xx狀態碼，所以jQuery運行第二個查詢到它在第一個響應中被重定向到的URL。

我使用的服務控制器沒有正確處理AJAX請求，所以在修改控制器以發送對AJAX請求的不同響應時，我不再會遇到問題。

來源

2017-01-04 18:23:49

有可能是您訂閱了兩次提交請求，因此雙重觸發了該事件。儘量確保綁定之前，你先解除綁定：

$(document).ready(function(){ 
    $('#myform').off('submit').on('submit', submitForm); 
});

有人說，你應該使用取消綁定/好做法結合在一起。這是同樣的事情，但使用off而不是unbind。

也可能是您已經將腳本包含在您的網頁中兩次了......請檢查一下！

來源

2017-01-04 17:23:33 Luke

表單只作爲一個實例存在。表單中的屬性和字段由其他事件更新，但只有一個地方處理提交事件，並在問題中記錄。無論如何，我確實嘗試用「off（）」來鏈接它，並且正如所料，它沒有任何作用。我還將'console.log（'submitted'）;'添加到處理程序的開頭，並且每次提交時它只出現一次。 –

您是否檢查過您沒有意外將腳本包含在您的頁面中？ :) – Luke

它只有一次，因爲它總是計劃包括一次作爲模態對話框，並簡單地更新其值。有問題的腳本與對話框的HTML一起被包含。我也嘗試拉出查詢設置參數，並將它們放入它們自己的變量並將它們轉儲到控制檯中，並且我只獲得了預期的設置值。問題肯定是AJAX調用本身。 –

jQuery - AJAX表單雙提交

回答

相關問題