Question

我有一个带有select选项的表单，它显示了一些选项，我想检索所选的选项以在文本框中显示它。我正在使用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'.

我该如何解决这个问题？

Answer 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();

AJAX异步导致null值。

1 个答案: