AJAX асинхронный, вызывающий нулевое значение.

Question

У меня есть форма с опцией выбора, которая отображает некоторые параметры, я хочу получить выбранную опцию, чтобы отобразить ее в текстовом поле. Я использую AJAX для извлечения некоторых XML-данных для отображения в качестве параметров.

После отображения параметров, и когда я пытаюсь получить выбранную опцию, я получаю null в асинхронном AJAX, но при синхронном вызове 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

Вы вызываете console.log() перед завершением обратного вызова 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>"); 
     }); 
     callMeAfterRequestComplete(); 
    }); 


} 

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

displaySubjects();