AJAX 异步导致空值。答案

【问题标题】：AJAX asynchronous causing null value.AJAX 异步导致空值。
【发布时间】：2014-09-16 12:48:41
【问题描述】：

我有一个带有选择选项的表单，其中显示了一些选项，我想检索所选选项以将其显示在文本框中。我正在使用 AJAX 检索一些 xml 数据以显示为选项。

显示选项后，当我尝试检索所选选项时，我在异步 AJAX 中得到 null，但在同步 AJAX 调用中，我得到正确的值。

这是我的代码：

function loadXML(url, callback){
    $.ajax ({
        type: "GET",
        url: url,
        cache: false,
        async: true,
        success: callback,
    });
}

function displaySubjects(){
    loadXML("subjects.xml", function(xml){
        $(xml).find("subject").each(function(){
            var courseCode = $(this).find("code")[0].textContent;
            var courseTitle = $(this).find("title")[0].textContent;
            $('#subject').append("<option value='" + courseCode + "'>" + courseCode + ": " +courseTitle + "</option>");
        })
    });
}

displaySubjects();
console.log($("#subject").val()); //Returns 'null'.

我该如何解决这个问题？

【问题讨论】：

你知道“异步”是什么意思，对吧？您通过在回调中进行处理来“修复”它。
@nnnnnn 这就是我所做的，我使用匿名函数作为回调。这是正确的吗？
您正在读取回调之外的值！这就像在送货员把披萨送到你家之前吃披萨一样。将 console.log 放在你的回调中。
您应该在异步请求的回调中进行处理。将您的 console.log 放入回调函数中。
我不明白为什么添加选项的Ajax代码与您获得选定的选项有关？当您在函数中添加选项时，您不会将它们中的任何一个设置为选中...

标签： javascript jquery ajax asynchronous

【解决方案1】：

您在 ajax 回调完成之前调用 console.log()。您可以做的一件事是添加另一个函数并在成功回调中调用它。

function loadXML(url, callback){
    $.ajax ({
        type: "GET",
        url: url,
        cache: false,
        async: true,
        success: callback,
    });
}

function displaySubjects(){
    loadXML("subjects.xml", function(xml){
        $(xml).find("subject").each(function(){
            var courseCode = $(this).find("code")[0].textContent;
            var courseTitle = $(this).find("title")[0].textContent;
            $('#subject').append("<option value='" + courseCode + "'>" + courseCode + ": " +courseTitle + "</option>");
        });
        callMeAfterRequestComplete();
    });


}

function callMeAfterRequestComplete(){
  console.log($("#subject").val());
}

displaySubjects();

【讨论】：

好的，谢谢，我需要在回调函数之外检索 select 选项的值。