Question

我正在尝试从我的数据库中获取数据并将其放在带有ajax的动态创建的行中。但每当我尝试在表格行中输入数据时，它都表示未定义。

这可能是因为我在ajax请求中正在执行ajax请求吗？无论如何，这是我的代码:(我知道它很大，但它是在网格中维护颜色代码的代码）

function detail(id, position, color)
{
    if (color == 1){
        var color = "#FFFFFF";
    }else{
        var color = "#E0F3F9";
    }

    var blnDelete;
    var rowIndex = position + 1;
    console.log("row index: " + rowIndex);
    var key = searchBox.value;
    var table = document.getElementById("0");
    xmlhttp=new XMLHttpRequest();

    console.log("cannot delete now");

    xmlhttp.open("GET","idSession.php?id="+id+"&index="+rowIndex,true);
    console.log("idSession.php?id="+id+"&index="+rowIndex);
    xmlhttp.send();

    xmlhttp.onreadystatechange=function(e)
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log("response received!");
                console.log(xmlhttp.responseText);
                console.log(id);
                oldId = xmlhttp.responseText;

                var response = xmlhttp.responseText;
                var oldIndex = response.substring(response.indexOf(":") + 1);
                var oldId = response.split(":", 1);
                console.log("oldIndex: " + oldIndex);
                console.log("oldId: " + oldId);

                if (oldId == id){
                    console.log("it's the same");
                    if (oldIndex != "none" && blnDelete == true){
                        table.deleteRow(oldIndex);
                        console.log("Deleted old row");
                        blnDelete == false;
                        console.log("cannot delete now");
                    }
                }else if (oldId != ""){
                    console.log("it's not the same");
                    if (oldIndex != "none"){
                        table.deleteRow(oldIndex);
                        console.log("Deleted old row");
                    }

                    var oldHTML = document.getElementById(id).innerHTML;
                    var detailRow = table.insertRow(position +1);
                    detailRow.style.height = '250px';
                    detailRow.style.backgroundColor = "'" + color + "'";

                    document.getElementById(id).vAlign="top";

                    var test = getInfo(id);
                    console.log("info: " + test);

                    detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";
                    blnDelete == true;
                    console.log("can delete now");
                }else{
                    console.log("it's empty");

                    var oldHTML = document.getElementById(id).innerHTML;
                    var detailRow = table.insertRow(position +1);
                    detailRow.style.height = '250px';
                    detailRow.style.backgroundColor = "'" + color + "'";

                    document.getElementById(id).vAlign="top";

                    var test = getInfo(id);
                    console.log("info: " + test);

                    detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";
                    blnDelete == true;
                    console.log("can delete now");
                }


            }
        }



};

function getInfo(id){

var info;

xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange=function(e)
        {

            if (xmlhttp.readyState < 4 && xmlhttp.status==200)
            {
                console.log("waiting...");
            }
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log("response received!");
                console.log("response: " + xmlhttp.responseText);
                info = xmlhttp.responseText;

                if (info == ""){
                    info = "N/A";
                    console.log("info:" + info);
                }

                console.log(info);
                return info;
            }
        }   

    xmlhttp.open("GET","getInfo.php?id="+id,true);
    xmlhttp.send();

};

所以我在这里做的是首先得到一个ajax请求，看看上一行有什么索引，看看是否应该删除它。所有代码都有效，但我无法工作的是：

var test = getInfo(id);
console.log("info: " + test);

detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td   bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";

由于某种原因，它一直说不明确。顺便说一句，ID是我表中行的id，它激活一个php脚本来搜索信息。但是一切正常，php脚本返回正确的值。但它不会在表格中打印正确的值，而是给我未定义。

提前致谢！

Answer 1

getInfo设置XmlHttpRequest对象，然后将匿名函数绑定到onreadystatechange。调用getInfo时，不会调用此匿名函数。它刚刚设置好，以后在状态变化时进行评估（得到它？）。

因此，执行getInfo时没有遇到同步返回语句。因此test未定义。

请参阅Pointy推荐的问题/答案：How do I return the response from an asynchronous call?

返回值是未定义的，即使在控制台中它不是

1 个答案: