我有一个带有此表单的 html 页面
<form id="quick-search" autocomplete="off" class="form-wrapper cf" >
<div style="text-align: center;">
<input id="qsearch" name="qsearch" onkeyup="liveSearch()" placeholder="Search here..." required="" type="text">
<button onclick='ajaxFunction()' id="submitButton">Search</button>
</div>`
这个 div 我把 ajaxFunction 的结果放在那里
<div id='ajaxDiv'>Your result will display here</div>
当我单击按钮时，ajaxFunction 执行。只需打开一个 php 文件，我在其中进行 sql 查询，因为用户在 qsearch 输入表单中写入它。这是 JavaScript 代码：
function createRequestObject(){
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_o = new XMLHttpRequest();
}
return request_o;
}
var http = createRequestObject()
function ajaxFunction(){
// Create a function that will receive data sent from the server
http .onreadystatechange = function(){
try{
if(http .readyState == 4){
if(http .status==200){
try{
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML= http .responseText;
}catch(err){
// display error message
alert("Error reading the response: " + err.toString());
return false;
}
}
}
else{
alert(http .readyState+" "+http .status);
}
}catch(e){
alert('Caught Expection: '+e.description+' '+http .status);
return false;
}
}
var par = document.getElementById('qsearch').value;
var queryString = "?par=" + par;
http.open("GET", "results3.php" + queryString, true);
http.send(null);
}
该代码运行良好，但问题是我需要单击按钮两次（当然在输入字段中使用相同的文本）以使结果文本保留在 div 中。第一次单击相同的结果，但页面自动刷新和结果（以及输入表单中的文本）消失。第二次单击页面不刷新显示没问题。通过代码中的警报，我可以看到 readyState 和状态. 产生的状态，状态是 1,0->2,200->3,200->1,0。在页面上显示的状态 3 和 1 之间的结果（显然状态 4 没有问题）但是为什么我在 4 之后有状态 1？所有这些都在 Firefox 17.0.1 中提前感谢您的帮助！