location.reload在POST到iframe时阻止表单提交(Firefox 37.0.2)



Firefox版本为37.0.2

我有一个MVC应用程序,我在其中提交表单以执行CRUD功能。我POST到一个隐藏的iframe,然后在POST后刷新页面,这样用户就可以在数据库更新后看到新数据。以下是负责添加新用户的javascript函数:

$('#submitNewUser').click(function () {
document.getElementById("newUser").submit();
$('#newUser').remove();
location.reload();
}

submitNewUser是用于提交表单(id和名称)的按钮。newUser是提交的模态表单的名称和id。因此,单击submitNewUser按钮,提交newUser表单,然后删除newUser模式窗口,然后重新加载页面。

这个功能在Chrome和IE中按预期工作(或者至少按我的预期)。在Firefox中,页面在不提交表单的情况下重新加载。控制台中没有错误,只是看起来像是发生了页面刷新。当我注释掉行:location.reload();时,表单会提交,但我必须手动刷新页面才能看到数据的更改。

我已经搜索过类似的问题,但到目前为止还无法解决这个问题。我尝试过的东西:

  • 将iframe的name参数更改为NAME
  • 从iframe的名称和id参数中删除任何大写字母
  • 使用window.location = window.location而不是location.reload()
  • 我将输入类型从button更改为submit,并将javascript函数修改为表单的onSubmit,但行为与我最初报告的问题相同
  • 我从表单中删除了target参数,然后从javascript中删除了location.reload()行。所有浏览器的行为都是相同的:表单被提交,页面被重定向到我的"成功!"页面。这告诉我location.reload()发生了一些事情,以及它是如何在Firefox中与iframe交互的。这是我的iframe代码:

    <iframe id="new_user_hidden_frame" name="new_user_hidden_frame" class="hide"></iframe>

这里是我为POST方法设置目标的地方:

<form id="newUser" method="POST" action='<c:url value="/createUser.htm" />' target="new_user_hidden_frame">

编辑:根据公认的答案,Firefox实际上是唯一一个在技术上正确处理这一问题的浏览器!我在收到回复之前刷新了页面,所以行为是100%合适的。我在我的功能中添加了以下内容,这样在收到响应之前页面不会刷新:

$.ajax({
success: function() {
window.location.reload(true);
}
});

正如您的代码所说,您正在尝试在获得响应之前重新加载页面,因此请求直到才完成,为此您必须延迟重新加载或使用ajax提交表单的更好方式,并在回调函数中重新加载页面。

最新更新