JavaScript从JSON获取数据并存入全局变量

Question

function test(){
    $.getJSON( "notebook-json-data.php", function( data ) {
       var myData = data;
    });
 }

在我的函数中，我得到了JSON对象，但是我想从其函数的作用域之外访问myData变量。

我尝试在函数外部设置var myData，但是没有成功.. :(

我不熟悉JSON，我需要进行任何解析吗？

如何将此变量设置为全局变量？

请帮忙...

- Hareesh

---

在函数外声明 var myData，在函数内不要重复使用 var（这会创建一个新的被遮蔽的 myVar）。请记住，调用是异步的，所以你不能简单地在 getJSON 调用之后访问它。 - Alex K.

不要用变量污染全局范围。而是将一个回调函数传递到test()中。 - CodingIntrigue

无论你将其设置为全局变量，由于ajax是异步的，它仍然无法在回调函数之外被访问！ - adeneo

如何从Ajax调用中返回响应 - adeneo

可能会出现这样的情况，即在getJSON方法完成读取JSON之前，您正在尝试读取变量。这是异步调用。您需要等待此函数完成其过程。 - Pramod S. Nikam

另外，你的代码缺少一个闭合的 )。 - Andy

Answer 1

不要尝试将myData设置为全局变量 - 这不起作用，因为getJSON是异步的。 要么使用promise：

function test() {
  return $.getJSON('notebook-json-data.php');
}

$.when(test()).then(function (data) {
  console.log(data);
});

或者一个回调函数：

function test(callback) {
  $.getJSON('notebook-json-data.php', function (data) {
    callback(data);
  });
}

test(function (data) {
  console.log(data);
});

编辑

由于您想在代码的其他部分使用数据，因此请使用闭包来创建一个环境，在该环境中，您的变量不会泄漏到全局空间。例如，使用回调函数：

(function () {

  var myData;

  function test(callback) {
    $.getJSON('notebook-json-data.php', function (data) {
      callback(data);
    });
  }

  test(function (data) {
    myData = data;
    autoPopulate('field', 'id');
  });

  function autoPopulate(field, id) {
    console.log(myData);
  }

});

myData 作为一个全局变量被缓存，该闭包专属。请注意，只有在回调函数完成后，其他函数才能使用该变量。

- Andy

---

我想要使用的数据在其他几个函数中使用，如果这样做，每次都会向服务器发送JSON请求吗？ - Hareesh

当我在HTML中多次调用该函数时，是否每次都会向服务器发送请求以加载“notebook-json-data.php”？ - Hareesh

有没有可能缓存数据或者第一次预加载并使用？ - Hareesh

我的编辑允许您将数据缓存到myData中 - 这是一个全局变量，但仅限于该闭包。 - Andy

Answer 2

不要创建全局变量，最好在“完成”时调用回调函数，像这样：

$.getJSON( "example.json", function(data) {
    console.log( "json loaded" );
    foo(data); 
})
.done(function() {
   console.log("");
   foo1(data);
});

更多信息请参考getJSON API。

问题在于，getJSON是异步的，因此当getJSON正在处理数据时，您的代码仍在执行。

function test(a){
    $.getJSON( "notebook-json-data.php", function( data ) {
       a = data;
    }
}

var main = function() {
  var a; 
  test(a);         /* asynchronous */
  console.log(a);  /* here, json could be hasn't already finish, most likely, so print 'undefined'   
}

- Luca Davanzo

---

+1 是为了展示异步调用结果为 undefined。这是我一直在使用的模式，但不理解为什么会出现 undefined 的结果。 - matt wilkie

Answer 3

您可以利用回调函数来从成功块中获取数据。

function test(callback){
    $.getJSON( "notebook-json-data.php", function( data ) {
       callback(data);
    }
 }

test(function(data){
  //Use your data here
});

- V31

Answer 4

声明一个全局的 JSON 对象。

var APP = APP || {}

现在您可以使用以下方式将动态数据设置到该对象中：

APP.myData = data;

您可以在JavaScript文件中随处使用此功能。只需使用：

APP.myData

- Jagadeesh