AJAX：提交表单而不刷新页面只能工作一次答案

【问题标题】：AJAX: Submitting form without page refresh only works onceAJAX：提交表单而不刷新页面只能工作一次
【发布时间】：2013-01-09 13:47:00
【问题描述】：

我在后台使用 AJAX 提交表单，而不刷新页面。我遇到的问题是我只能提交一次表格。提交一次后， on('submit') 函数不再起作用，并且我没有收到任何错误。这完全违背了使用 AJAX 提交表单的目的：/

           $(document).on('submit', '#myForm', function(e) {
                $.post('mail.php', $(this).serialize(), function (data) {
                    //SUCCESS
                    $('.successORfail').html(data);
                     setTimeout(function(){
                      $(".successORfail").fadeOut("slow", function () {
                        $(".successORfail").remove();
                      });
                    }, 4500);

                }).error(function() {
                    alert("Fatal Error: mail.php not found!");
                });
                e.preventDefault();
            });

我想知道是否有人遇到过类似的问题或知道如何解决这个问题？我希望能够多次提交表单，并在每次提交后更改表单输入值（如果需要）。

在此先感谢

【问题讨论】：

你的缓存有问题！尝试将cache 设置为false，如下所示：api.jquery.com/jQuery.ajax 同时禁用服务器事件缓存。
为什么要缓存post 提交？

标签： javascript jquery ajax

【解决方案1】：

您确定没有发生 AJAX 请求吗？看起来您正在从页面中删除 .successORfail 元素，因此在后续调用中没有任何内容可附加到。

检查您的控制台，您可能会注意到每次都发生 ajax 调用。

尝试将您的 setTimeout 更改为：

var msgEl = $(".successORfail");
setTimeout(function() {
    msgEl.fadeOut("slow", function () {
        msgEl.empty().show();
    });
}, 4500);

【讨论】：

+1 感谢您的回复。这很好用。但是，我在编辑之前使用了您以前的代码。您的新代码似乎是一个过于复杂的版本。
@MHZ 编辑的原因是为了在答案中加入一些最佳实践。 :) 每次调用$(".successORfail") 时，jQuery 都必须遍历你的 DOM 并找到它，这对于大页面来说会变得非常慢。存储 jQuery 对象并重新使用它的效率要高得多，尤其是当您使用类选择器时。

【解决方案2】：

您的成功事件处理程序：

$('.successORfail').html(data);
setTimeout(function () {
  $(".successORfail").fadeOut("slow", function () {
    $(".successORfail").remove();
  });
}, 4500);

在元素中设置内容 (.successORfail)，然后删除该元素。下次您提交表单时，会获得成功的响应，然后执行该函数，该元素不再用于设置内容，因此您不会看到任何变化。

【讨论】：

【解决方案3】：

不要删除元素，只需.hide() 它，以便下次可以填充它。你也需要每次.show()它。

       $(document).on('submit', '#myForm', function(e) {
            $.post('mail.php', $(this).serialize(), function (data) {
                //SUCCESS
                $('.successORfail').html(data).show(); //<-- show

                 setTimeout(function(){
                  $(".successORfail").fadeOut("slow", function () {
                    $(this).hide(); //<-- hide
                  });
                }, 4500);

            }).error(function() {
                alert("Fatal Error: mail.php not found!");
            });
            e.preventDefault();
        });

同样在fadeOut() 函数中，您可以使用$(this) 访问元素，而不是根据类名重新选择它。

【讨论】：

【解决方案4】：

你能添加一些 HTML-sn-p 吗？如果不了解您的 html 结构，很难提供帮助，因为如果您通过 $('.successORfail').html(data); 替换表单；侦听器不会重新绑定到表单。您还应该返回 FALSE，因为表单数据是通过 javascript 发送的。

【讨论】：

【解决方案5】：

好吧，您似乎将结果附加到$('.successORfail').html(data); 并删除它。取出以下内容，它应该可以多次工作......

$('.successORfail').remove();

没有该元素，就无法进行更改。

【讨论】：