ajax php調用不返回任何內容

Question

我希望php將值返回給ajax。 我正在遵循W3學校的示例，但並不高興。 這是javascript / ajax代碼：

function createReport() {
    var xmlhttp;    
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("report").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","test.php",true);
    xmlhttp.send();
}

我在一個知道觸發的事件處理程序中有以下調用（它所做的其他工作正常）

createReport();

稍后在html的主體部分中，我有：

<div id="report">Report will be placed here...</div>

如果我自己運行test.php，它會正確顯示“將其返回給ajax”，因此我知道這是可行的。 這是PHP代碼：

<?php
echo 'return this to ajax';
?>

我的理解是“報告將放置在這里...”將替換為“將其返回給ajax”。 但是什么也沒發生。 我也沒有在firefox或IE控制台中看到任何錯誤。 有任何想法嗎？

Answer 1

我個人認為w3cschools不是學習的好地方（請參閱http://www.w3fools.com/ ）。

可能是由於您設置ajax的順序而導致出現問題，您這樣做：

XMLHttpRequest/onreadystatechange/open/send

最好（如果不遵循此順序，則在較舊的瀏覽器中可能會出現一些缺陷）：

XMLHttpRequest/open/onreadystatechange/send

注意：不用擔心，“ open（...）”不會啟動偵聽器。 偵聽器僅在“發送（...）”之后工作

另一個原因可能是您沒有創建XMLHttpRequest.status “錯誤處理”，它用於驗證服務器響應中的錯誤。

嘗試這個：

<script>
function XHR(){
    if(window.XMLHttpRequest){//outers browsers
        return new XMLHttpRequest();
    } else if(window.ActiveXObject){//IE
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch(ee) {//IE
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(ee) {}
        }
    }
    return false;
}

function createReport(){
    var xhr = XHR();// call ajax object
    if(xhr){
        xhr.open("GET", "test.php", true);//setting request (should always come first)
        xhr.onreadystatechange = function(){//setting callback
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("report").innerHTML=xhr.responseText;
                } else {//if the state is different from 200, is why there was a server error (eg. 404)
                    alert("Server return this error: " + String(xhr.status));
                }
            }
        };
        xhr.send(null);//send request, should be the last to be executed.
    } else {
        alert("Your browser no has support to Ajax");
    }
}
</script>

<div id="report">Report will be placed here...</div>

<script>
createReport();//prefer to call the function after its div#report
</script>

為了防止緩存，請替換：

xhr.open("GET", "test.php", true);

通過

xhr.open("GET", "test.php?nocache="+(new Date().getTime()), true);

Answer 2

乍看之下，我在您的js代碼上沒有發現任何錯誤，所以我敢打賭，在您的文件夾結構中定位test.php可能是一個問題。

使用螢火蟲檢查正在執行的javascript AJAX調用，並檢查文件test.php是否被正確評估。

Answer 3

try{
    request = new XMLHttpRequest();
}catch(trymicrosoft){
     try{
        request = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(othermicrosoft){
        try{
            request = new ActiveXObject("Microsoft.XMLHTTP");
       }catch(failed){
            request = false;
       }  
    }
}
if(!request)
{
    alert("Error initializing XMLHttpRequest!");
}

function Create_Ajax_Query(LinkToFile,Parametrs)
{
    window.document.body.style.cursor='progress';
    request = new XMLHttpRequest();
    var url = LinkToFile;
    var params = Parametrs;

    request.open("POST", url, true);    
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
    request.setRequestHeader("Content-length", params.length);
    request.setRequestHeader("Connection", "close");
    request.onreadystatechange = newinfo;
    request.send(params); 
 }

function newinfo() 
{
    if(request.readyState==4 && request.status == 200){
        window.document.body.style.cursor='default';
        alert(request.responseText);
    } 
}

希望它有用！

Answer 4

在測試了隨后的代碼（從其網站提取）之后，我沒有發現W3Schools的Ajax示例有任何問題。

• 可能的因素：

  1. 缺少<script></script>標簽

  2. 確保已啟用JS。

  3. 確保您的瀏覽器支持它。

  4. 您可能忘記了將按鈕的調用更改為適當的功能。

使用FF 26.0和IE版本7進行工作和測試的代碼

從W3 Schools Website (example)提取，並進行了少許修改以證明該作品。

單擊Change Content按鈕時的結果：

根據您的PHP代碼將其return this to ajax 。

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("report").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="report"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

使用的PHP： （test.php）

<?php
echo 'return this to ajax';
?>

---

• 其他可能的因素：

  1. 如果在local計算機上，則您的服務器不支持PHP或未正確解析PHP，或者未正確安裝或配置。
  2. 如果在托管服務上，請確保您可以使用PHP。
  3. 文件與從中執行的文件不在同一文件夾中。

Answer 5

該代碼看起來正確。 它可以在本地環境中正常運行。 我建議查看開發人員工具中的“網絡”標簽，以檢測服務器端可能發生的任何錯誤。 您還可以使用console.log（）遵循javascript的實際流程：

function createReport() {
    var xmlhttp;    
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        console.log(xmlhttp); //to show the entire object after statechage.
        console.log(xmlhttp.readyState); //to show specific parameter.        

        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("report").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","test.php",true);
    xmlhttp.send();
}