Значение не может быть присвоено переменной после получения из базы данных

Question

После получения значения из базы данных результат не был присвоен переменной. Ниже приведены мои коды. Оповещение результата arr возвращает значение, но предупреждает, что четное изображение и громкоговоритель пусто

    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();  // Create a FormData object
    form_data.append('file', file_data);  // Append all element in FormData  object

    $.ajax({
            url         : serverURL() + "/upload.php",    

            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data,                         
            type        : 'post',
            success     : function(arr){
                    alert(arr[0].result);

                  imgNewUserPictureName = (arr[0].result);   

            }
     });




    var file_data1 = $('#pic1').prop('files')[0];
    var form_data1 = new FormData();  // Create a FormData object
    form_data1.append('file', file_data1);  

    $.ajax({
            url         : serverURL() + "/upload1.php",    

            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data1,                         
            type        : 'post',
            success     : function(arr){

                alert(arr[0].result);

                  imgNewUserPictureName1= (arr[0].result);         
            }
     });



    var eventimage = imgNewUserPictureName;
    var speakerimage = imgNewUserPictureName1;

Answer 1

Ajax является асинхронным, используйте функцию обратного вызова

var eventimage = '';
var speakerimage = '';

var file_data = $('#pic').prop('files')[0];
var form_data = new FormData(); // Create a FormData object
form_data.append('file', file_data); // Append all element in FormData  object

var file_data1 = $('#pic1').prop('files')[0];
var form_data1 = new FormData(); // Create a FormData object
form_data1.append('file', file_data1);

// the magic
function RequestCallback() {
  console.log(eventimage)
  console.log(speakerimage)
}


$.ajax({
  url: serverURL() + "/upload.php",
  cache: false,
  contentType: false,
  processData: false,
  data: form_data,
  type: 'post',
  success: function(arr) {
    alert(arr[0].result);

    eventimage = (arr[0].result);

    $.ajax({
      url: serverURL() + "/upload1.php",
      cache: false,
      contentType: false,
      processData: false,
      data: form_data1,
      type: 'post',
      success: function(arr) {
        alert(arr[0].result);

        speakerimage = (arr[0].result);
        // eventimage and speakerimage is set, run callback function
        RequestCallback()
      }
    });

  }
});

Answer 2

Присвоение переменной до завершения функции ajax обязательно выдаст неопределенное или нулевое значение. Этого ожидали, потому что Ajax еще не завершен.

Есть два способа. Обратный звонок или Асинхронный. Но в этом случае обратный вызов становится чище и не блокирует взаимодействие с пользователем.

Взгляните на этот пример

   function assignToVar(response){
    var assign = response;
    alert(assign.title)
   }

   $(document).ready(function(){

      $.ajax({
            url         :"https://jsonplaceholder.typicode.com/todos/1", 
            cache       : false,
            contentType : false,
            processData : false,                     
            type        : 'get',
            success     : assignToVar
     });

   });

Выполните присваивание в обратном вызове и, что наиболее важно, вызовите присвоенное значение после того, как функция ajax уже завершена.

JS Fiddle здесь http://jsfiddle.net/keysl183/nb029qcL/4/