Firefox 的 Javascript 问题：未更新表单提交的状态答案

【问题标题】：Firefox issue with Javascript: Not updating status on form submissionFirefox 的 Javascript 问题：未更新表单提交的状态
【发布时间】：2013-04-24 22:42:38
【问题描述】：

现在我已经多次尝试通过 Ajax 将表单数据发送到服务器脚本而不刷新页面（使用表单的 onSubmit 事件）。这一切都适用于所有浏览器（Chrome、IE 等），但对于 Firefox，处理仍在继续。我的意思是，即使数据已经发送到服务器端（是的，很多时候，我已经在服务器端获取了数据，但客户端仍在处理中），客户端不会响应连续调用.

例如，考虑我的示例代码之一：

这里是 Javascript

function submitComment(id)
{
 //id is the id of the postbox
 var content=$("#"+id).val();
 var xmlhttp;
 if(window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
 else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

 xmlhttp.onreadystatechange=function()
 {
  if(xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   //action taken in response to the script from server in response to this form submission, eg, enabling back the submit button
   $('input[type="submit"]').removeAttr('disabled');
  }
 }

 $('input[type="submit"]').attr('disabled','disabled');
 xmlhttp.open("POST",host+"comment.php?mode=newpost",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("post="+content);
 $('#status').html('Posting your comment. Please wait...');//shows this status as long as gets no response from server
 return false;
}

这是它的 HTML：

<form id='newpostform' method=post action='' onSubmit="return submitComment('post')" >
 <textarea id='post' name='post'></textarea>
 <input type=submit value=Post>
 <span id='status' style='padding:10px; font-size:12px; color:black; font-family:cambria, segoe ui;'>
 </span>
</form>

因此，在除 Firefox 之外的所有浏览器中，提交按钮会被禁用一段时间，直到脚本将帖子传送到服务器并且当服务器响应时，提交按钮被激活并更新状态。

问题恰好出现在 Firefox 中。即使数据已经传送到服务器，状态栏也永远不会改变它的状态！

【问题讨论】：

有什么特别的原因为什么你直接使用XMLHttpRequest等而不是JS库？
我不会看到直接使用 XMLHttpRequest 有任何问题，jQuery 已经被用于操作 DOM，所以不使用像 .ajax 这样的内置命令有点奇怪.不过，我认为这不会导致这种情况下的问题。
@Paul：不，我使用该代码仅显示一个示例。我确实为此目的使用了 jQuery。但由于我是新手，所以我避免使用它。然而，即使使用 jQuery，问题仍然没有解决。
@PaulGrime：三个小时内对您的评论的三个支持让我想起了meta.stackexchange.com/a/48195 :) 说真的，一个特定于浏览器的问题在不使用抽象时最容易回答。
解决了我的问题。 stackoverflow.com/questions/1980880/… 只是因为我使用的是绝对路径。使用相对路径解决了我的问题。但是，我仍然对我必须使用这样的相对路径这一事实感到困惑：驻留在索引目录本身的脚本文件的路径属性中的 index/index.php。为什么？我的意思是，简单地使用“index.php”应该可以解决问题，不是吗？无论如何，我的问题解决了，所以谢谢大家:) 在这里得到这个链接

标签： javascript forms firefox onsubmit

【解决方案1】：

问题评论中的答案：

解决了我的问题。 XMLHTTPRequest.status returns 0 and responseText is blank in FireFox 3.5

这只是因为我使用的是绝对路径。使用相对路径解决了我的问题。

太棒了！

至于你的附加问题：

但是，我仍然对我必须使用这样的相对路径这一事实感到困惑：index/index.php 在驻留在索引目录本身的脚本文件的路径属性中。为什么？我的意思是，简单地使用'index.php'应该可以解决问题，不是吗？

据我了解，您的 HTML 位于 http://example.org/test.html 与

<script src="subdir/main.js>

...解析为http://example.org/subdir/main.js，调用XMLHttpRequest：

xhr.open("POST", "index.php", true);

这请求http://example.org/index.php，而不是http://example.org/subdir/index.php

这是因为 XMLHttpRequest 中的相对 URL（在许多其他情况下）是 resolved 与 the document's base URL，而不是脚本的 URL。

如果相对 URL 是根据脚本的 URL 解析的，结果可能会非常混乱：假设您在 /lib/jquery.js 有 jQuery，它调用 XMLHttpRequest，而您自己的代码在 /main.js 调用 jQuery.ajax(... "data.文本文件” ...）。这个请求应该是/data.txt 还是lib/data.txt？

【讨论】：