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>

Answer 1

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

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

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

要解决此问题，请在goCouch功能的末尾添加“return false”。

Answer 2

您的提交按钮将提交表单，这将导致页面重新加载。如果您在函数return false的末尾添加gotToCouch，则不应该提交提交（不是100％确定）。

除此之外，你正在做一个ajax请求，但是你没有使用回调函数来取回结果，你强迫请求是同步的...这可能不会导致任何问题，但是将暂停浏览器，直到请求得到回复，只是说......

Answer 3

要阻止默认操作，您可以使用

功能

event.preventDefault()

Answer 4

我只想更改你的按钮类型。

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

如果您确实需要提交表单，可以在javascript中执行form.submit()。