表单提交中的jquery无限循环答案

【问题标题】：jquery infinite loop in form submit表单提交中的jquery无限循环
【发布时间】：2013-12-22 20:23:11
【问题描述】：

我创建了一个自定义 wordpress 插件，它应该执行以下操作：

页面加载时，提交表单
ajax 捕获它并执行一些其他功能
返回结果

唯一的问题是插件开始重定向到另一个页面并无限循环。我已将其隔离到 jquery 提交代码，但我无法弄清楚我做错了什么。我希望你们能帮助一个睡眠不足的程序员。

  $('#searchform').submit(function(e) {
     e.preventDefault();
     $.ajax({
        type: 'POST',
         url: '../wp-content/plugins/otwcsl/getStores.php',
         data: $('#searchform').serialize(),
         success: function(response) {
           searchLocations(response);
           $('#searchform').unbind().submit();
         }
     });
   });

它在我的本地主机环境中运行良好，但在“实时”网站上却发疯了。我无法弄清楚断开连接，但我很确定问题出在此处。提前致谢！

更新：我已经把所有东西都删掉了，直到看起来像这样：

$('#searchform').submit(function(e) {
    return false;
}

它已停止循环，但会从 http://www.mypage.com/index.php/locations/ 重定向到 http://www.mypage.com/index.php/?s=。我无法弄清楚，因为它显然不是影响它的 ajax。

最终更新：我终于解决了这个问题。我删除了所有“提交”功能，而是使用了按钮单击。我使用了在选项 3 中找到的答案 here。我猜以前的一些脚本严重干扰了表单。不幸的是，此时我不能禁用脚本来查找根本原因。感谢大家帮我解决问题！

【问题讨论】：

您是否检查过其他页面是否正在重定向回您的原始页面？
完全删除 ajax 调用会发生什么？它会重定向吗？
嗯，呵呵！每次 ajax 调用完成时，您都会触发提交处理程序，一遍又一遍地启动相同的函数。你期待什么。
我已经尝试删除整个 ajax 调用，但它仍然不断重定向到另一个页面。不过，它已停止循环该重定向。

标签： php jquery ajax wordpress

【解决方案1】：

您在 ajax 调用中有此代码：

$('#searchform').unbind().submit();

在其中您再次提交表单。我想这就是问题所在。

【讨论】：

我已经尝试删除它，但它仍在循环重定向
尝试删除 ajax 调用并将其替换为 return false;。如果循环停止，则返回 false 并返回 ajax 回调。
我删除了 ajax 调用并替换为 return false。它仍然重定向。真的很奇怪。
你确定这就是你使用的所有代码吗？请创建一个 jsfiddle，以便我们可以准确地看到正在发生的事情

【解决方案2】：

无限循环，因为如果提交是 seccussfull，您再次提交表单：

success: function(response) {
           searchLocations(response);
           $('#searchform').unbind().submit();
         }

为什么要在成功后再次提交？删除它，它会工作！

应该是：

success: function(response) {
               searchLocations(response);
             }

更新：

你的提交函数应该是这样的：

var _form = $('#searchform');
_form.unbind();
_form.submit(function(e) {
     e.preventDefault();
     $.ajax({
         type: "POST",
         url: "../wp-content/plugins/otwcsl/getStores.php",
         data: _form.serialize(),
         success: function(response) {
           //searchLocations(response); // check this method may be its submit the form again
         }
     });

});

【讨论】：

【解决方案3】：

检查来自服务器的响应并在 ajax 调用中设置适当的数据类型。

【讨论】：

我确定这与服务器端有关。
所以你在服务器端进行了重定向，或者一些.htaccess。这种循环行为多半是由后端引起的，可能是循环中有一些php执行。或响应另一条路由的路由，而不是响应相同路由的路由

【解决方案4】：

您可以使用以下方法调试您的 ajax：

$.ajax({
  url: $form.attr("action"),
  type: $form.attr("method"),
  data: $form.serializeArray()
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.log(jqXHR, textStatus, errorThrown);
}).done(function(data, textStatus, jqXHR) {
  console.log(data, textStatus, jqXHR);
});

【讨论】：

它成功但输出一个完全不同的页面（见更新问题）