为什么 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);;
    }

Answer 2

在 getResult 函数 ajax 成功回调中，正在使用“课程”变量，但未在任何地方定义。 它可能导致异常，这使得脚本执行在调用 getInnerResp 之前停止。