2

我正在编写一小段代码，该代码通过 html 表单从用户那里获取输入，然后使用XMLHttpRequest从服务器（在本地运行）检索信息（以 xml 格式） ，一旦我得到信息，我将其输出到使用列表中我为onreadystatechange编写的方法。但是，一旦将列表写入页面，它会自动刷新页面并且列表消失。我完全不知道为什么要这样做？！我已经设法使用window.onbeforeunload强制停止页面刷新并停止刷新，但我不禁认为有更好的方法解决这个问题，我一定做错了什么。我的代码如下：

var xmlhttp=null;

函数 byObserver(){

var a = document.forms["byObserverForm"]["observerName"].value;
a = encodeURIComponent(a);

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
    xmlhttp.onreadystatechange = onReadyStateByObserver;
    xmlhttp.open("GET","http://localhost:8004/birdobs/observer/" + a, false);
    xmlhttp.send();   
} 
return false;

}

function onReadyStateByObserver(){

if (xmlhttp.readyState == 4){

    if (xmlhttp.status == 200){

        var xmlDoc = xmlhttp.responseXML;
        var observations = xmlDoc.getElementsByTagName("observation");

        if (observations.length != 0){

            // output into unordered list 
            var f = document.createDocumentFragment();
            var e = document.createElement("ul");
            f.appendChild(e);
            var ul = f.firstChild;

            for (i = 0; i<observations.length; i++) {
                var li = document.createElement("li");

                var te = document.createTextNode(observations[i].getAttribute("observer"));
                li.appendChild(te);
                ul.appendChild(li);
            }  // end for 
            document.getElementById("content").appendChild(f);

            window.onbeforeunload = function(){
                return "Refresh";
            }


        }
    }
} 
//have also tried return false here

}

任何帮助将不胜感激，因为我花了很长时间试图解决这个问题，非常感谢提前！（我没有包含 HTML，因为我认为不需要它，但请询问它是否有帮助，我会发布它！）我最后会添加我在 chrome 中运行它。

4

3 回答 3

2

当您提交表单时，您应该停止默认事件，例如return false在提交时调用的函数末尾。也许页面正在刷新，因为您没有停止submit事件（因此浏览器被重定向到action表单属性指定的页面）

于 2012-04-26T10:13:09.397 回答
2

这很可能是因为浏览器仍在提交表单。您需要通知浏览器您不希望发生默认的表单提交处理。

false从您的 onsubmit 方法返回应该执行此操作。

** 更新 **

假设您正在使用onsubmit处理程序并且正在调用的函数byObserver然后尝试以下操作：

<!-- HTML -->
<form ... onsubmit="return byObserver()">

// javascript
function byObserver() {
  ...
  return false;
}
于 2012-04-26T10:14:52.930 回答
1

在通过提交表单调用的方法结束时，您需要return false;

看起来被触发的函数是byObserver，所以你会做以下事情：

function byObserver(){
   [...]
   return false;
}
于 2012-04-26T10:13:51.017 回答