jQuery 的 ajax 导致 FireFox 中的整个页面刷新

Posted 2023-05-08

【中文标题】jQuery 的 ajax 导致 FireFox 中的整个页面刷新

【英文标题】：jQuery's ajax is causing a full page refresh in FireFox

【发布时间】：2010-10-05 10:42:18

【问题描述】：

我正在使用 jQuery 进行 ajax 调用。 ajax 调用在 IE 7 中运行良好，但 FireFox 3 在进行此调用时总是会刷新整页。 ajax 调用正在发布到 ASP.NET 页面方法。

是 jQuery 有问题还是我只是缺少一些设置？

$.ajax(
  async: false,
  type: "POST",
  url: "Default.aspx/DoSomething",
  data: "" + parms + "",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  cache: false,
  success: function(data)  succesfulPost(data); ,
  error: function(XMLHttpRequest, textStatus, errorThrown)  
    errorPost(textStatus, errorThrown);
  
);

调用是通过一个 html 按钮 onclick 事件进行的。我试过了 return false; 在进行此 ajax 调用的方法中，但 FireFox 中的完全刷新仍在继续。

我尝试设置 async = true，但这似乎不起作用。 FireFox 只是继续运行，不会等待后端返回响应。 FireFox（在 js 中）实际上是在 ajax 调用中产生错误。正如您在上面看到的，错误函数已定义，并且在我设置 async = true 时触发。

【问题讨论】：

我会保持 async=true，然后从那里调试。你有安装 Firebug 吗？如果是这样，请打开 Firebug，然后单击“Net”选项卡，然后查看单击按钮时调用的内容。您应该看到对 Default.aspx/DoSomething 的请求以及正在传递的任何参数。看看那里有没有奇怪的地方。

【参考方案1】：

return false 是您需要的，但是如果在您点击该行之前发生 javascript 错误，那么浏览器将继续愉快地执行链接点击或按钮点击事件。

您可以尝试使用 try/catch 块包围潜在的问题区域。

或者你可以试试这个：

e.preventDefault 作为处理程序中的第一条语句。这应该阻止默认事件的发生，我认为您可以提前调用它...我只是没有尝试过。

编辑：我还想补充一点，ajax 错误：处理程序仅捕获来自服务器的错误...例如 403 或 500。您仍应将 ajax 调用包装在 try/catch 中。

【讨论】：

event.preventDefault 成功了。我将 async 设置为 true 并添加了上述内容，现在一切似乎都正常了。

如果您可以在此处添加特定的代码示例，那就太好了。

【参考方案2】：

您是如何调用 AJAX 方法的？如果它也将导致表单上的提交，它可能就像取消启动 AJAX 请求的事件一样简单。

<input type="submit" onclick="doAjaxSubmit();return false;" value="Update" />

添加“return false;”将导致典型的提交操作被取消。如果它来自文本框，那么您需要将 e.preventDefault 添加到设置为执行 AJAX 的按键（或其他）处理程序的处理程序中。

【讨论】：

正是我想知道的。所以，如果其他人也有同样的想法，也许我并不太离谱；）

这解决了我的问题，感谢您的解决方案。在 Chrome 中运行良好，但在 FF 或 IE 中运行良好。 Chrome 的另一个 +1，尽管从技术上讲这是我的错 Chrome 处理得很好。

Chrome 似乎不再能很好地处理这个问题。

【参考方案3】：

此外，如果您的输入是 type="submit"...您可以将其更改为 type="button"。然后它不是试图提交表单......只是做你的“点击”事件。

【讨论】：

这使我朝着正确的方向前进。我有一个没有特定类型的表单按钮。当我提交 ajax 调用时，它不断触发页面重新加载。将按钮类型设置为 type="button" role="button" 为我解决了这个问题

小心这种方法。如果按钮在表单上，​​用户仍然可以按 Enter 键，这似乎与按下提交按钮的效果相同。

【参考方案4】：

这个调用是在点击事件中吗？如果是，请确保点击事件的结尾有一个“return false”。只是一个想法。我知道这很老套，但是，我想我还是要提一下。

否则，据我所知，您的电话看起来不错。

【参考方案5】：

我在使用 Ajax 的 Firefox 上遇到了类似的问题。我在一个表单标签中有几个输入元素。但是，表单标签导致页面刷新，即使我用按钮标签替换了我的标签。我用 div 替换了表单标签，问题就消失了。

如上所述，我还尝试了 e.preventDefault()。这也解决了问题，同时允许我继续使用表单标签。