Question

我必须承认，我真的不知道如何解释这个＆＃34;问题＆＃34;我也没有能够找到这个主题的好标题。无论如何，我会尽量清楚，因为我不确定是否可以添加JSFiddle或代码片段。

让我们从项目开始。我正在处理某种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();              
       },
    });     
});

第二次编辑：看起来它在缓存清除后终于解决了。感谢所有贡献的人。：）

Answer 1

尝试在发送数据后重置表单：

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

这会阻止序列化功能获取第一个提交数据

加载Ajax的表单总是发送输入的第一个值，即使重新加载

1 个答案: