Question

请考虑以下代码：

的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从localhost运行它。

Answer 1

您需要<button type="button">来重现<input type="button">的行为。

如果省略<button>上的类型，则默认为submit（由于某个错误，IE＆lt; 8除外;因此，您应始终在{{type上使用<button>属性1}}）。提交按钮将导致表单提交，导致导航并取消XMLHttpRequest。

一般情况下，您应该在表单上捕获onsubmit而不是onclick特定按钮，以确保在通过其他方式（例如按Enter键）提交表单时始终会收到通知。（因此，您使用普通的submit按钮。）使用事件处理程序中的return false来阻止表单提交继续。

XMLHttpRequest对<input type =“button”/>与<button> </button>的不同行为

1 个答案: