Question

我在使用AJAX成功范围之外的JSON对象时遇到问题。我需要在AJAX成功范围之外访问返回的JSON对象。我尝试在AJAX范围之外初始化JS var并为其分配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

这是ajax的a非常重要的地方。异步表示在运行成功回调之前alert和后续.attr()行正在运行。你真的应该将这些行放在成功回调中。

Answer 3

查看延迟的obj和.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
});

无法访问AJAX成功之外的JSON对象

4 个答案: