即使重新加载，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加载的表单总是发送第一个值

回答

相关问题