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可能会有问题。

使用firebug检查调用你正在做的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按钮时的结果：

return this to ajax - 根据您的PHP代码。

<!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();
}

ajax php调用没有返回任何东西

5 个答案:

使用FF 26.0和IE版本7