javascript - JavaScriptのinnerHTMLの問題

Question

divタグの内部HTMLをステータスメッセージに変更するコードがあります。これはtryメソッドに含まれています。唯一の問題は、ステータスが約3秒間表示されたままになり、その後消えることです。これはtryメソッドによるものだと思いますが、これを止める方法はありますか？

<script> 
        function goCouch(form){

            var xmlHttp = false; 
                try {
                    var couchURL = form.inputbox.value;

                    xmlHttp = new XMLHttpRequest();
                    xmlHttp.open( "GET", "http://" + couchURL + ":5984", false );
                    xmlHttp.send( null );
                    var couchWelcome = xmlHttp.responseText;
                    var requestedServerStatus = xmlHttp.status;

                    var status = document.getElementById("status")
                    status.innerHTML = couchWelcome;

                    //alert(requestedServerStatus);
                    //alert(couchWelcome); 
                } catch (failed) {
                  xmlHttp = false;
                }

                if (!xmlHttp){
                  //alert("Don't panic, but I can't connect to that server.");
                }
            }
        </script>

<div id="mainContent">


            <form action="" method="get" id="myform">
                Enter your database URL<br>
                <input type="url" name="inputbox" value="">
                <input type="submit" name="button" value="Go" onclick="goCouch(this.form)"></p>
            </form>

            <div id="status"></div>
        </div>

score 2 · Accepted Answer

onClick ハンドラーは、フォームの送信ボタンにアタッチされます。

false を返さないか、デフォルトのイベントアクションを妨げないため、何が起こっていると思いますか。

ボタンをクリックすると、onClick ハンドラが実行を開始します
ハンドラーは同期 XHR 要求を実行し、サーバーから応答を取得して、div を更新します。
制御がブラウザに戻り、ブラウザはフォームを送信して続行します
フォームアクションが "" であるため、ブラウザは実際にページをリロードします。
ページがリロードされると、メッセージは消えます。

これを修正するreturn falseには、goCouch 関数の末尾に " " を追加します。

score 0 · Accepted Answer

送信ボタンはフォームを送信しようとしているため、ページがリロードされます。return false関数の最後にa を追加するとgotToCouch、送信は行われません (これについて 100% 確実ではありません)。

それとは別に、あなたは ajax リクエストを行っていますが、コールバック関数を使用して結果を取得していません。リクエストを強制的に同期させています...おそらく問題は発生していませんが、リクエストが応答を返すまで、ブラウザで...

score 0 · Accepted Answer

ボタンのタイプを変更するだけです。

<input type="button" name="button" value="Go" onclick="goCouch(this.form)">

フォームを送信する必要がある場合はform.submit()、javascript で a を実行できます。

score 0 · Accepted Answer

デフォルトのアクションを防ぐには、関数を使用できます

event.preventDefault()

javascript - JavaScriptのinnerHTMLの問題

4 に答える 4

Related

Reference