即使重新加載，Ajax加載的表單總是發送第一個值

我不得不承認，我不知道如何解釋這個「問題」，也沒有能夠爲這個線程找到一個好的標題。無論如何，我會盡力澄清，因爲我不確定是否可以添加JSFiddle或代碼段。即使重新加載，Ajax加載的表單總是發送第一個值

讓我們從項目開始。我正在研究某種DVD庫，僅用於本地網絡。有一個頁面允許用戶添加新的電影到數據庫。爲此，我使用Allocine API（與IMDB相當的法語）來收集電影信息。用戶可以輸入電影標題（或其一部分）並執行搜索。 Allocine的所有相應電影將出現。如果用戶點擊其中一個，模式窗口會打開一個表單，用於在發送表單之前添加所需的信息。然後使用AJAX發送表單並將結果顯示在相同的模式窗口中。問題出現在我想添加第二部電影的時候。如果我再次嘗試提交表單之前沒有重新加載頁面，則第一部電影的價值將會從第二部電影中發出，而不是從第二部電影中發出，這讓我發瘋。

下面是用於發送表單的JavaScript代碼。

$("body").on("click", "#AddFilmButton", function() {  
    var formDatas = $('#FormAjoutFilm').serialize(); 

    $.ajax({ 
     url : 'Functions.php', 
     type : 'POST', 
     data : 'Action=AddFilm&' + formDatas, 
     cache: false, 
     dataType : 'html', 
     success : function(result, statut){ 
      $(result).modal();    
     }, 
    });  
});

您可能注意到，我在看一個按鈕單擊事件而不是表單提交事件。那是因爲當我使用表單提交事件時，無論我是否使用preventDefault，頁面都會一直刷新。我開始懷疑發送的值是否因爲我使用了此解決方法而未完全重置。這是否可以呢？

還有什麼其他代碼可以幫助您理解我的問題？

編輯：就像@intale建議的那樣，由於這種模態系統，我在DOM中有多個窗體。我取得了一些進展。首先，我現在可以使用適當的事件處理程序，並且我正在將表單提交事件視爲preventDefault現在可以使用。在成功功能中，我添加了這一行：$('#FormAjoutFilm').remove(); 它的工作原理幾乎如此，數據只在其他時間提交。：p 不過，它比以前的行爲要好，我現在需要修復它。感謝迄今爲止捐款的人。如果你知道爲什麼我需要兩次發送表單才能使其工作，請告訴我。這是我現在擁有的。 :)

$("body").on("submit", "#FormAjoutFilm", function(e) {  
    e.preventDefault(); 
    var formDatas = $('#FormAjoutFilm').serialize(); 

    alert(formDatas); 

    $.ajax({ 
     url : 'Functions.php', 
     type : 'POST', 
     data : 'Action=AddFilm&' + formDatas, 
     cache: false, 
     dataType : 'html', 
     success : function(result, statut){ 
      $('#FormAjoutFilm').remove(); 
      $(result).modal();    
     }, 
    });  
});

第二編輯：它看起來像它終於在緩存清除後解決。感謝所有貢獻的人。 :)

來源

2015-09-16 Tuttu

99％的機會，你已經在DOM重複的ID。我想你在添加第二個DOM（通過執行'$（result）.modal（）;'）時不會刪除第一個表單。所以當你執行'$（'＃FormAjoutFilm'）。serialize（）'時，該值將從第一個表單中選取。 – intale

在模式中定義了「＃FormAjoutFilm」表單嗎？ – Kenney

您是否嘗試在'success'函數中添加'$（'＃FormAjoutFilm'）。reset（）;'？ – SarathChandra

嘗試正在重置表單中的數據被髮送後：

success : function(result, statut){ 
    $('#FormAjoutFilm')[0].reset(); 
    $(result).modal();    
    }

這將防止您的序列化功能，從得到第一個提交數據

來源

2015-09-16 16:08:54 AZV

在@SarathChandra建議它之後嘗試了它，並且它一直告訴我'TypeError：$（...）。reset不是函數' – Tuttu

嘗試將其更改爲$（'＃FormAjoutFilm'）[0] .reset（）;'。 – SarathChandra

TypeError：$（...）。只有當您有一個名爲'reset'的元素ID時，reset纔會發生。我想不出任何其他問題 – AZV

即使重新加載，Ajax加載的表單總是發送第一個值

回答

相關問題