从本地 JSON 文件加载后，javascript 变量为 'null' 或 'undefined'

Question

我正在尝试根据 JSON 文件“gunsList.json”的内容创建一个 javascript 变量 my_jason(两者都存储在我机器上的同一文件夹中)。

我似乎遇到了与 OP 在 this post 中相同的问题，当他更正他有缺陷的 JSON 文件时，这个问题就解决了。认为我有同样的问题，我通过 JSONLint 运行我的文件(我假设这是正确的验证)，并且它回来干净。

从this post借用技巧，我尝试使用 jQuery 来完成它(注意:我在现有代码的其他部分成功使用了 jQuery)，如下所示:

var my_json;
$.getJSON('gunList.json', function(json) {
my_json = json;
});

当我尝试上述方法时(例如，alert(my_json))，my_json 是undefined。

诚然，我对AJAX知之甚少，但我也尝试过:

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

在上面的例子中，my_json 是 null。

当我将“gunsList.json”中的数组作为变量粘贴到我的 js 文件中时，我所有引用数组的代码都运行良好，但作为一个初出茅庐的程序员，我真的很高兴让它与 JSON 一起工作.

Answer 1

这就是为什么您的原始 $.getJSON() 代码不起作用的原因 - 注释显示了每一步的执行顺序和 my_json 的值:

var my_json;
// 1 - my_json is undefined
$.getJSON('gunList.json', function(json) {
    // 3 (!)
    my_json = json;
    // 4 - my_json now has the JSON data
});
// 2 - my_json is undefined (!)

如您所见，该函数在 my_json 值设置之前返回。

因此您尝试通过在 $.ajax() 调用上使用 async: false 选项来修复它。但这是一个非常糟糕的主意!除非您有非常充分的理由，否则切勿使用该选项:在许多浏览器中，它不仅会挂断您自己的站点，还会挂断所有浏览器选项卡和窗口，直到您的服务器返回数据。

相反，让 $.ajax() 或 $.getJSON() 调用异步操作，并在回调或函数中对数据执行某些操作你从那个回调中调用。所以，回到你原来的 $.getJSON() 代码，你可以这样做:

$.getJSON( 'gunList.json', function( json ) {
    // Do stuff with JSON data here, or call a function here and
    // pass the data to it as an argument
});