Невозможно получить доступ к объекту JSON за пределами успеха AJAX

Question

У меня возникли проблемы с использованием объекта JSON за пределами области успеха AJAX. Мне нужно получить доступ к возвращенному объекту JSON за пределами области успеха AJAX. Я попытался инициализировать JS var вне области AJAX и назначить JSON. Однако этот подход приводит к ошибке catalog.item is undefined. Я ценю любые предложения, которые помогут мне исправить эту проблему.

Это то, что я пробовал:

Этот подход отлично работает (но не то, что мне нужно):

  $('.catViewButton').click(function(){ 
       var overlay = jQuery('<div class="overlay"> </div>'); 
       overlay.appendTo(".invoice-body"); 
       $('.catalog-view-wrapper').show(); 
       $.ajax({ 
        url: "ajax/invoice-get-data.php?loadCatalog=1", 
        dataType: "json", 
        success: function(catalog){ 
         alert(catalog.item[0].image); 
         $('.catalog-img-container').attr("src", catalog.item[0].image); 
        } 
       }); 

         ...more code 
         ..... 
         ..... 

Этот подход является то, что мне нужно, но приводит к ошибке:

 var catalog = []; 
     $('.catViewButton').click(function(){ 
      var overlay = jQuery('<div class="overlay"> </div>'); 
      overlay.appendTo(".invoice-body"); 
      $('.catalog-view-wrapper').show(); 
      $.ajax({ 
       url: "ajax/invoice-get-data.php?loadCatalog=1", 
       dataType: "json", 
       success: function(cat){ 
        catalog = cat; 
       } 
      }); 
      alert(catalog.item[0].image); 
      $('.catalog-img-container').attr("src", catalog.item[0].image); 
        ...more code 
        ..... 
        ..... 

Большое спасибо заранее!

Answer 1

Вы можете использовать Deferred Object, который занимается асинхронными вызовами для вас. Выполнение этого кода будет выполняться в порядке чтения, независимо от того, когда ответ отправлен обратно. Вы можете добавить столько обратного вызова, как вам нужно:

jqxhr = $.ajax({ 
    url: "ajax/invoice-get-data.php?loadCatalog=1", 
    dataType: "json" 
}); 
jqxhr.done(function(catalog) { 
    alert(catalog.item[0].image); 
    $('.catalog-img-container').attr("src", catalog.item[0].image); 
}); 
jqxhr.done(function(catalog) { 
    // use catalog again 
}); 

документация полна примеров о том, что все: http://api.jquery.com/jQuery.ajax/.

Answer 2

Здесь важно, чтобы a из ajax. Асинхронный означает alert, а последующие линии .attr() работают до того, как будет выполнен обратный вызов вашего успеха. Вы действительно должны помещать эти строки в обратный вызов успеха.

Answer 3

Посмотрите на отложенные объекты и .when(). Вам не нужно вносить все в обратный вызов успеха.

http://api.jquery.com/category/deferred-object/ http://api.jquery.com/jQuery.when/

Answer 4

Это как работает AJAX. Результаты, возвращаемые функции success:, являются локальными для этой функции.

Если вам необходимо получить доступ к ним вне зависимости успеха, один вариант, чтобы сохранить их в элементе - такие как скрытый <input> поле, как этот:

Предположив скрытое поле ввода, как это:

<input type="hidden" id="myHiddenField" /> 

Пересмотренный AJAX

$.ajax({ 
    url: "ajax/invoice-get-data.php?loadCatalog=1", 
    dataType: "json", 
    success: function(catalog){ 
     $('#myHiddenField').val(catalog); 
     $('#myHiddenField').trigger('blur'); 
    } 
}); 

Вне функции AJAX:

$('#myHiddenField').blur(function() { 
    var cat = $(this).val(); 
    //now do something with the data in var cat 
});