javascript - 为什么 jQuery 在嵌套的 Ajax 函数中不起作用？

Question

在调用嵌套的 Ajax 时，最里面的 ajax 不起作用。如以下示例所示，我将 getInnerResp 调用到 getResult 中。

通常，当我使用 firebug 进行调试时，它的工作很有趣。我认为它的行为与 async false 相同，但我将 async 属性设置为 false 不再起作用。此外，我尝试使用 getInnerResp 函数中的回调函数获取结果集。不幸的是我没有以任何方式成功。 getResult 函数中的 ftbl 变量也返回 null。 getInnerResp 只返回跟随的结果；

结果

<tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr>

Javascript

function getResult(year){

    var visible  = true;
    var table    = $(".tbl"), tbody = $(".result").find("tbody"), ftbl = "";
    
    table.find("tbody>tr").each(function(){
        var data = {
            course : $(this).find(".course").val(),
            year   : year,
            prog   : $(this).find(".program").val()
        }
        
        if(year.length < 1){
          alert("Year field can not be empty!!");
          visible = false;
          return false;
        }
        
        $.ajax({
            url : "result.php",
            method : "GET",
            data : data,
            contentType: "application/json; charset=utf-8",
            traditional : true,
            success : function(d){           
                tbody.append("<tr><td>" + course + "</td><td>" + d.enrolledStudent + "</td><td>" + d.failedStudent + "</td>");
                if(visible){
                    ftbl += getInnerResp(course, year);
                    console.log("inner" + ftbl);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown){
                alert("Javascript runtime error: " + textStatus);
            }
        });
    });

    if(visible){
        tbody.append(ftbl);
    }
}

function getInnerResp(course, year){
  
    var tbl = "";
      
    var data = {
        course : course,
        year   : year
    }
    
    for(var i = 0; i < 5; i++){
        tbl += "<tr><td colspan='3'></td></tr>";
    }
      
    $.ajax({
        url : "course.php",
        method : "GET",
        data : data,
        contentType: "application/json; charset=utf-8",
        success : function(json){           
            $.each(json, function(i, val){
                tbl += "<tr><td>" + course + "</td><td colspan='2'>" + val + "</td></tr>";
            });
        },
        error : function(XMLHttpRequest, textStatus, errorThrown){
            alert(textStatus);
        }
    });
      
    return tbl;
}

Answer 1

这是你的问题:

ftbl += getInnerResp(course, year);

您尝试将将来生成的值(异步)分配给局部变量。

尝试在内部函数中移动任务，例如:

function getResult(year){

        var visible  = true;
        var table    = $(".tbl"), tbody = $(".result").find("tbody"), ftbl = "";

        table.find("tbody>tr").each(function(){
            var data = {
                course : $(this).find(".course").val(),
                year   : year,
                prog   : $(this).find(".program").val()
            }

            if(year.length < 1){
                alert("Year field can not be empty!!");
                visible = false;
                return false;
            }

            $.ajax({
                url : "result.php",
                method : "GET",
                data : data,
                contentType: "application/json; charset=utf-8",
                traditional : true,
                success : function(d){
                    tbody.append("<tr><td>" + course + "</td><td>" + d.enrolledStudent + "</td><td>" + d.failedStudent + "</td>");
                    if(visible){
                        //
                        // do the remaing in the inner task....
                        //
                        getInnerResp(course, year, tbody);
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown){
                    alert("Javascript runtime error: " + textStatus);
                }
            });
        });

    }

    function getInnerResp(course, year, tbody){

        var tbl = "";

        var data = {
            course : course,
            year   : year
        }

        for(var i = 0; i < 5; i++){
            tbl += "<tr><td colspan='3'></td></tr>";
        }

        $.ajax({
            url : "course.php",
            method : "GET",
            data : data,
            contentType: "application/json; charset=utf-8",
            success : function(json){
                $.each(json, function(i, val){
                    tbl += "<tr><td>" + course + "</td><td colspan='2'>" + val + "</td></tr>";
                });
                tbody.append(tbl);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown){
                alert(textStatus);
            }
        });

        console.log("inner" + tbl);;
    }