JavaScript insideHTML 问题

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>

Answer 1

您的 onClick 处理程序附加到表单的提交按钮。

由于您没有返回 false，或者以其他方式阻止默认事件操作，我认为发生的情况是这样的:

• 单击按钮，onClick 处理程序开始运行
• 处理程序执行同步 XHR 请求，从服务器获取响应，并更新 div。
• 控制权传回浏览器，浏览器继续提交表单
• 由于表单操作是“”，浏览器实际上会重新加载页面
• 重新加载页面后，该消息就会消失。

要解决此问题，请将“return false”添加到 goCouch 函数的末尾。