0

我已经阅读了其他几个主题，但似乎不太理解。我对 Javascript 不太了解，到目前为止，我基本上已经猜到了。我有一个函数运行 AJAX 请求以从数据库中获取一些行。然后对于每一行，我需要运行一个嵌套的 AJAX 请求并将其值返回给第一个函数。两个 AJAX 请求都独立工作，但是我不知道如何正确嵌套它们。这是我所拥有的：

function updateSummaryVariablesInput(typeId) {
    if (typeId=='') {
        document.getElementById('summaryVariables').innerHTML='';
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp2=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp2=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp2.onreadystatechange=function() {
        if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
            xmlDoc=xmlhttp2.responseXML;
            txt='<table>';
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                if (x[i].getElementsByTagName('common')[0].childNodes[0].nodeValue < 1) {
                    txt=txt + '<tr><th style=\"width: 150px;\">' + x[i].getElementsByTagName('label')[0].childNodes[0].nodeValue +  '</th><td>';
                    // Select
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'select') {
                        txt=txt + '<select name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\"><option></option>';
                        myoptions = getSummaryVariableOptions(x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue);
                        //alert(myoptions.length);
                        for (j=0;j<myoptions.length;j++) {
                            txt=txt + '<option value=\"' + myoptions[j] + '\">' + myoptions[j] + '</option>';
                        }
                        txt=txt + '</select>';
                    }
                    // Text
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'text') {
                        txt=txt + '<input type=\"text\" name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\" />';
                    }
                    txt=txt + '</td></tr>';
                }
            }
            txt=txt + '</table>';
            document.getElementById('summaryVariables').innerHTML=txt;
        }
    }
    xmlhttp2.open('GET','/cgi/new/Ajax/getOutageVariablesByTypeId.php?typeId='+typeId,true);
    xmlhttp2.send();
}

function getSummaryVariableOptions(variableId) {
    var options = new Array();
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp3=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp3=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp3.onreadystatechange=function() {
        if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
            xmlDoc=xmlhttp3.responseXML;
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                options[i] = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;
            }
            alert(options.length);
        }
    }
    xmlhttp3.open('GET','/cgi/new/Ajax/getOutageVariableOptionsByVariableId.php?variableId='+variableId,true);
    xmlhttp3.send();
    //alert(options.length);
    return options;
}

按原样运行，我会收到一个有效数字的警报，例如 5。如果我取消注释任何其他警报功能，它们只会输出 0。

4

3 回答 3

1

在 Jaime 的回答之后几乎到了那里。仍然有一个问题，即 getSummaryVariableOptions 实际上是一个异步 ajax 调用，这意味着 updateSummaryVariablesInput 在 getSummaryVariableOptions 的结果被拉入之前很久就完成了。这导致标签在结束标签之后附加到 txt。Shea 进行了编辑以将选项标签存储在一个数组中，然后使用 innerHtml 将它们插入到后面的数组中。谢谢谢伊！

var getQueue = [];

function updateSummaryVariablesInput(typeId) {
    if (typeId=='') {
        document.getElementById('summaryVariables').innerHTML='';
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp2=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp2=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp2.onreadystatechange=function() {
        if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
            xmlDoc=xmlhttp2.responseXML;
            txt='<table>';
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                if (x[i].getElementsByTagName('common')[0].childNodes[0].nodeValue < 1) {
                    txt=txt + '<tr><th style=\"width: 150px;\">' + x[i].getElementsByTagName('label')[0].childNodes[0].nodeValue +  '</th><td>';
                    // Select
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'select') {
                        txt=txt + '<select id=\"' + x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue + '\" name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\"><option></option></select>';
                        // Add it to a queue, to do it later
                        getQueue.push(x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue);
                    }
                    // Text
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'text') {
                        txt=txt + '<input type=\"text\" name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\" />';
                    }
                    txt=txt + '</td></tr>';
                }
            }
            txt=txt + '</table>';
            document.getElementById('summaryVariables').innerHTML=txt;
            for (var gsi = 0; gsi < getQueue.length; ++gsi) {
                getSummaryVariableOptions(getQueue[gsi], function (myoptions, parentId) {
                    var parentSelect = document.getElementById(parentId),
                        optionsTxt = '';
                    for (j=0;j<myoptions.length;j++) {
                        optionsTxt=optionsTxt + '<option value=\"' + myoptions[j] + '\">' + myoptions[j] + '</option>';
                    }
                    parentSelect.innerHTML = optionsTxt;
                });
            }
        }
    }
    xmlhttp2.open('GET','/cgi/new/Ajax/getOutageVariablesByTypeId.php?typeId='+typeId,true);
    xmlhttp2.send();
}

function getSummaryVariableOptions(variableId, callback) {
    var options = new Array();
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp3=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp3=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp3.onreadystatechange=function() {
        if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
            xmlDoc=xmlhttp3.responseXML;
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                options[i] = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;
            }
            // Revised to send variableId to callback
            callback(options, variableId);
            //alert(options.length);
        }
    }
    xmlhttp3.open('GET','/cgi/new/Ajax/getOutageVariableOptionsByVariableId.php?variableId='+variableId,true);
    xmlhttp3.send();
    //alert(options.length);
    //return options;
}
于 2013-11-08T05:43:57.757 回答
1

问题是您正在尝试访问第二个 ajax 调用的返回值，就好像它是同步的，但不是。

因此，当您getSummaryVariableOptions在第一个 ajax 调用中调用时，您需要执行以下操作：

getSummaryVariableOptions(...., function (myoptions) {
  alert(myoptions.length); // now you have what you need here
  ..... /// put the reset of the code that depende on myoptions here
});

然后向您的getSummaryVariableOptions函数添加一个参数，该参数接收数据到达时要调用的函数——回调。

function getSummaryVariableOptions(variableId, callback) {
    ... inside the readystate === 4 ...
    callback(options);
}

当您调用getSummaryVariableOptions它时，它会启动 ajax 调用并立即返回，因此您需要等到调用完成，然后使用调用中的数据进行回调。你不能做var myoptions = getSummaryVariableOptions(..)

编辑：

基于 jquery 的方法如下所示：

$.getJSON(url1, function (res1) {
  $.getJSON(url2, function (res2) {
     // now you have both res 1 and res 2 to process here...
  });
});
于 2013-11-08T01:15:43.973 回答
0

嵌套的 ajax 请求需要一个数组来存储每个请求并在完成时记录错误。

https://stackoverflow.com/a/18728553/2450730

一个简单的解决方案是执行顺序 ajax 脚本..（这是使用 xhr2 和 JSON）还需要一些错误检查..但它让您知道如何完成它。

var mainListArray,
Length,
Current;

function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()};

function loadmain(){
 ajax('mainList.php',seq)
}

function seq(){
 mainListArray=JSON.parse(this.response);
 Length=mainListArray.length;
 Current=0;
 next();
}

function next(){
 ajax('Detail.php?id='+mainListArray[Current].id,add);
 Current++;
}

function add(){
 // do something with detailed data
 if(Current<Length){
  next();
 }else{
  //everything loaded.
 }
}

window.onload=loadmain;

在这种情况下，您可以避免一些 a​​jax 错误，因为每个请求都是在前一个请求完成后执行的。

ajax函数解释

https://stackoverflow.com/a/18309057/2450730

这是一个图形示例，顺序函数如何工作。

http://jsfiddle.net/4eujG/

于 2013-11-08T01:49:15.210 回答