0

我有一段代码将 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>
4

4 回答 4

2

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

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

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

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

于 2012-10-04T19:59:33.300 回答
0

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

除此之外，您正在执行 ajax 请求，但您没有使用回调函数来获取结果，而是强制请求同步......这可能不会导致任何问题，但会停止浏览器，直到请求得到响应，只是说......

于 2012-10-04T20:00:15.937 回答
0

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

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

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

于 2012-10-05T13:27:34.467 回答
0

为了防止默认操作，您可以使用该功能

event.preventDefault()
于 2012-10-04T20:33:27.793 回答