Question

是否可以从PHP表单中获取AJAX（javascript）中的返回值？

这是我在AJAX中的PHP表单：

function start()
{
    xhr = new XMLHttpRequest();

    if (xhr == null)
    {
        alert('Probleem met het maken van het XMLHttpRequest object');
        return;
    }

    var url="xml/Producten.xml";


    if (document.getElementById("radio1").checked)
    {
        xhr.onreadystatechange=alles;
    }
    else
    {
        xhr.onreadystatechange=drank;
    }



    xhr.open("Get",url,true);
    xhr.send(null); 
}
function alles()
{
    if (xhr.readyState == 4 && xhr.status == 200)
    {
        var xmlDoc = xhr.responseXML;
        var strOutput;

        strOutput="<table class='product'><tr>";

        var aantal = xmlDoc.getElementsByTagName("naam").length;

        for (var i=0; i<aantal; i++)
        {
            strOutput += "<td><p><img src='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue + "'></p>";
            strOutput += "<p>&euro; " + xmlDoc.getElementsByTagName("prijs")[i].childNodes[0].nodeValue + "</p>";
            strOutput += "<p>" + xmlDoc.getElementsByTagName("naam")[i].childNodes[0].nodeValue + "</p>";
            strOutput += "<p><form action='' method='POST'>";
            strOutput += "<input class= 'nummers' type='number' name='aantal' min='1' max='20'>";
            strOutput += "<input type='submit' value='In mandje' name= 'toevoegen'>";
            strOutput += "<input type='hidden' name='id' value='" + i +"'>";
            strOutput += "<input type='hidden' name='id' value='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue +"'>";
            strOutput += "</form></p></td>";    

        }
        strOutput += "</table>";
    }
    document.getElementById("tekstBox").innerHTML = strOutput;
}

当我运行这个脚本时，它没有出错，但我也没有得到任何返回值。我之所以这样问，是因为我对AJAX很陌生。

这是我调用我的函数start()的地方：

<form action="">
<p><input class="radio" id="radio1" type="radio" onclick="start()" name="type" value="Alles" checked="checked">Alles</p>
<p><input class="radio" id="radio2" type="radio" onclick="start()" name="type" value="Pizza">Pizza</p>
<p><input class="radio" id="radio3" type="radio" onclick="start()" name="type" value="Voorgerecht">Voorgerecht</p>
<p><input class="radio" id="radio4" type="radio" onclick="start()" name="type" value="Dessert">Dessert</p>
<p><input class="radio" id="radio5" type="radio" onclick="start()" name="type" value="Drank">Drank</p>
</form>

答案：

i循环中的for必须从1开始，而不是从0开始，因为我的产品的ID从1开始。

Answer 1

回调函数alles＆amp; drank引用变量xml，它看起来已在ajax函数中声明（或简称为实例化）。要么全局声明xml var（即：var xml;），要么作为对它的引用或对回调的响应传递。下面的代码将响应传递给回调而不是xhr对象本身。

function start(){
    var xhr = new XMLHttpRequest();
    if (xhr == null){
        alert('Probleem met het maken van het XMLHttpRequest object');
        return;
    }
    var url="xml/Producten.xml";

    xhr.onreadystatechange=function(){
        if( xhr.readyState == 4 && xhr.status == 200 ) {
            var callback=document.getElementById("radio1").checked ? alles : drank;
            callback.call( this, xhr.responseXML );
        }
    };
    xhr.open( "GET", url, true );
    xhr.send( null ); 
}

function alles(r){
    if (r) {
        var xmlDoc = r;
        var strOutput;

        strOutput="<table class='product'>";

        var aantal = xmlDoc.getElementsByTagName("naam").length;

        for (var i=0; i<aantal; i++) {
            strOutput += "<tr><td><p><img src='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue + "'></p>";
            strOutput += "<p>&euro; " + xmlDoc.getElementsByTagName("prijs")[i].childNodes[0].nodeValue + "</p>";
            strOutput += "<p>" + xmlDoc.getElementsByTagName("naam")[i].childNodes[0].nodeValue + "</p>";
            strOutput += "<p><form action='' method='POST'>";
            strOutput += "<input class= 'nummers' type='number' name='aantal' min='1' max='20'>";
            strOutput += "<input type='submit' value='In mandje' name= 'toevoegen'>";
            strOutput += "<input type='hidden' name='id' value='" + i +"'>";
            strOutput += "<input type='hidden' name='id' value='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue +"'>";
            strOutput += "</form></p></td></tr>";    
        }
        strOutput += "</table>";
    }
    document.getElementById("tekstBox").innerHTML = strOutput;
}

Answer 2

要回答你的实际问题，是的，很有可能从php脚本中获取Ajax的返回值，这就是为什么使用Ajax的原因。

虽然我不完全确定您当前的脚本无法正常工作，但这并不让我感到惊讶，因为它不是您想要的方式。

查看jQuery，这是将Javascript应用到项目中的最佳方式，特别是如果您尝试使用Ajax来访问您的网页内容。

$.get("xml/Producten.xml", function (result) {
    //this is the success result handler,
    //result contains whatever you return in your php script.
    var radio = $("#radio1"); //getElementById.

    //etc
});

如果您选择采用这种方法，我可以通过jQuery为您提供更多帮助。

Answer 3

首先，您在此处执行函数alles：

xhr.onreadystatechange=alles;

并将该函数的结果（在本例中为undefined）分配给xhr.onreadystatechange。

现在，当状态发生变化时，XMLHttpRequest会尝试调用现在为onreadystatechange的{{1}}，因此不会发生任何事情。

所以你的undefined函数应该是这样的：

alles()

现在，您仍然将函数的结果分配给function alles(){ return function(){ if (xhr.readyState == 4){ if(xhr.status == 200){ var xmlDoc = xhr.responseXML; var strOutput; strOutput="<table class='product'><tr>"; var aantal = xmlDoc.getElementsByTagName("naam").length; for (var i=0; i<aantal; i++){ strOutput += "<td><p><img src='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue + "'></p>"; strOutput += "<p>€ " + xmlDoc.getElementsByTagName("prijs")[i].childNodes[0].nodeValue + "</p>"; strOutput += "<p>" + xmlDoc.getElementsByTagName("naam")[i].childNodes[0].nodeValue + "</p>"; strOutput += "<p><form action='' method='POST'>"; strOutput += "<input class= 'nummers' type='number' name='aantal' min='1' max='20'>"; strOutput += "<input type='submit' value='In mandje' name= 'toevoegen'>"; strOutput += "<input type='hidden' name='id' value='" + i +"'>"; strOutput += "<input type='hidden' name='id' value='" + xmlDoc.getElementsByTagName("img")[i].childNodes[0].nodeValue +"'>"; strOutput += "</form></p></td>"; } strOutput += "</table>"; document.getElementById("tekstBox").innerHTML = strOutput; } } } }，但这次它是一个可调用的函数，而不是xhr.onreadystatechange。

AJAX中的PHP表单无法返回

3 个答案: