AJAX中的PHP表单无法返回

是否可以从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>

回答：

for循环中的i必须从1开始,而不是从0开始,因为我的产品的id从1开始.

解决方法:

回调函数alles& drank引用看起来已经在ajax函数中声明(或更简单地实例化)的变量xml.全局声明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;
}