javascript - Ajax启动太晚了...真不方便

Question

我在使用 AJAX 时遇到了这个问题。我运行代码，并且在打印代码时 ajaxString 未定义，即使 Ajax 代码几乎是在 return 语句之前调用的。当我尝试在 HTML 生成和打印之后检索 AJAX 时，定义了 AJAX，因此它让我认为在 AJAX 有机会完成之前调用了返回。有什么办法解决这个问题吗？这是我当前的代码:

var ajaxHTML;
function runCode(str) {
    if (str == 'SubmitB' || str == 'SubmitC' || str == 'SubmitD') {
        generateHTML(str);
    }
    else {
    $('#Holder1').html("");
    $('#Holder2').html("");
    $("#container_demo").fadeOut(500);
    setTimeout(function(){$("#menu_container").html(generateHTML(str))},500);
    $("#container_demo").fadeIn(500);
    }
}
function generateHTML(source){
if (source =='d') {
          return makeSchoolComboBox() + "Please Select a Level: <select id='selectedLevel'><option value='level1'>l1</option><option value='level2'>l2</option><option value='level3'>l3</option><option value='level4'>l4</option></select><br> <button id = 'r' onClick='runCode(this.id)'>Go back</button><button id = 'SubmitD' onClick='runCode(this.id)'>Submit</button>";
    }
function makeSchoolComboBox() {
    $.ajax({
            type: 'GET',
            url: 'phpQueries.php?q=fill_school_list',
            success: function (data) {
                ajaxHTML = data;
            }
        });
        return ajaxHTML;
}

Answer 1

由于 AJAX 是异步的，因此您无法调用它并在调用仍在进行时直接返回。您需要在成功回调中填充菜单容器，如下所示...

function runCode(str) {
    if (str == 'SubmitB' || str == 'SubmitC' || str == 'SubmitD') {
        generateHTML(str);
    }
    else {
        $('#Holder1').html("");
        $('#Holder2').html("");
        $("#container_demo").fadeOut(500);
        makeSchoolComboBox();
    }
}

function makeSchoolComboBox() {
    $.ajax({
        type: 'GET',
        url: 'phpQueries.php?q=fill_school_list',
        success: function (data) {
            $("#menu_container").html(data  + "Please Select a Level: " +
                "<select id='selectedLevel'>" +
                "<option value='level1'>l1</option>" +
                "<option value='level2'>l2</option>" +
                "<option value='level3'>l3</option>" +
                "<option value='level4'>l4</option>" +
                "</select><br> <button id = 'r' onClick='runCode(this.id)'>Go back</button>" +
                "<button id = 'SubmitD' onClick='runCode(this.id)'>Submit</button>").fadeIn(500);
        }
    });
}