ajax XMLHttpRequest readystate

时间:2012-12-29 01:11:21

标签: php html debugging xmlhttprequest readystate

我有一个带有此表单的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中 在此先感谢您的帮助!

1 个答案:

答案 0 :(得分:-1)

  

我至少工作了一天,在发布问题10分钟后我找到了解决方案!答案在这里[停止用ajax,javascript,php刷新] [1] [1]:Stop refreshing with ajax , javascript , php ...我只需要在这里添加return false:onclick ='ajaxFunction(); return false'现在它可以工作了完善!谢谢!