JQuery $.ajax() 异步获取数据到变量中

Question

我正在尝试将一些数据放入一个变量中以在模板中使用。我在名为get.php 的文件中使用<?php file_get_contents(...) 作为代理以避免跨域问题。

下面的代码可以工作，但会警告'async' : false 已被弃用。但是，当我将其更改为 true 时，它返回 null。

请问我错过了什么？实现我想要做的事情的正确、现代的方法是什么？

$(document).ready(function(){

var json = (function () {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'get.php',
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})(); 

console.log(json);

});

Answer 1

问题

jQuery 的$.ajax() 是一个异步调用，结果是console.log() 在您完成检索数据之前运行。

解决方案

$.ajax 返回一个jqXHR 对象。我们将使用该对象的.done() 方法来完成异步调用。像这样：

$(document).ready(function(){

    var def = $ajax({
        global: false,
        url: 'get.php',
        dataType: 'json'
    });

    // Pass in the completion callback here
    def.done(function(data) {
        console.log(data);
    });
});

当 AJAX 调用完成并注销 JSON 数据时，将调用 .done() 方法。

Answer 2

这是因为 console.log(json); 在您的 success 回调之前运行。如果您在 json = data; 之后立即移动到它，它将与 'async' : true 一起使用。