3

次のコードを検討してください。

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を表示し、2番目のボタンはステータス200を表示します。

もちろん、両方とも200を表示することを期待していますが、なぜ<button>が異なる動作をするのかわかりません。それほど大したことではありませんが<button>、サイト全体で同じように使用したいと思います。

私はウェブを見て、私の会社の他の開発者に尋ねましたが、答えが見つからないようです。何か案は？

それが役に立ったら、私はFirefox3.6.8でテストしています。また、ローカルホストからWAMPserver2.0経由で実行しています。

4

1 に答える 1

7

<button type="button">の動作を再現する必要があり<input type="button">ます。

タイプを省略する<button>と、デフォルトでになりますsubmit（バグによるIE <8を除く。このため、常にtype属性を使用する必要があります<button>）。送信ボタンを使用すると、フォームが送信され、ナビゲーションが発生してXMLHttpRequestがキャンセルされます。

一般に、Enterキーを押すなどの別の方法でフォームが送信された場合に常に通知を受けるために、特定のボタンでonsubmitはなくフォームをトラップする必要があります。onclick（したがって、通常のsubmitボタンを使用します。）return falseフォームの送信が先に進まないようにするには、イベントハンドラーから使用します。

于 2010-07-27T22:48:48.897 に答える