考虑以下代码:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<button id="getInfoButton1"></button>
<input type="button" id="getInfoButton2"></input>
</form>
</body>
</html>
随附的 JavaScript 文件:
script.js
window.onload = initAll;
var req;
function initAll()
{
document.getElementById("getInfoButton1").onclick = getInfo;
document.getElementById("getInfoButton2").onclick = getInfo;
}
function getInfo()
{
req = new XMLHttpRequest();
var URL = "index.html";
req.open("GET", URL, true);
req.onreadystatechange = whatsTheStatus;
req.send(null);
}
function whatsTheStatus()
{
if (req.readyState != 4) { return; }
alert(req.status);
}
(我已经精简了我的代码很多，但是这个例子仍然突出了错误)
问题是这样的:当您加载它并单击两个按钮时，第一个将显示状态 0，而第二个将显示状态 200。
当然，我希望两者都显示 200，但我不知道为什么 <button>表现不同。这不是什么大不了的事，但我想保持对 <button> 的相同使用。整个网站。
我在网上四处查看并询问了我公司的其他一些开发人员，但我们似乎无法找到答案。有什么想法吗？
如果有帮助，我正在 Firefox 3.6.8 上进行测试。另外，我通过 WAMPserver 2.0 从本地主机运行它。
你需要 <button type="button">重现 <input type="button"> 的行为.
如果您在 <button> 上省略类型它默认为 submit (由于错误导致 IE<8 除外；因此，您应该始终在 type 上使用 <button> 属性)。提交按钮将导致表单提交，导致导航并取消 XMLHttpRequest。
一般来说，你应该捕获 onsubmit在表格上而不是 onclick在特定按钮上，以确保如果表单是通过其他方式(例如按下 Enter)提交的，您始终会得到通知。 (因此你会使用一个普通的 submit 按钮。)使用 return false来自事件处理程序以防止表单提交继续进行。