Question

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

var xmlhttp=null;

function 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中运行它。

Answer 1

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

Answer 2

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

从onsubmit方法返回false应该这样做。

**更新**

假设您正在使用onsubmit处理程序，而被调用的函数是byObserver，请尝试以下操作：

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

// javascript
function byObserver() {
  ...
  return false;
}

Answer 3

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

看起来被触发的函数是byObserver，所以你要执行以下操作：

function byObserver(){
   [...]
   return false;
}

停止页面刷新

3 个答案: