javascript - 如何使用 JavaScript 加载和解析服务器中的静态 JSON 文件

Question

我刚刚开始使用 javascript 和 json。

在 javascript 函数中处理事件时，我需要从 json 文件中读取数据(getInformation 函数)。所以我需要它是同步的。我不知道我是否在代码中遗漏了什么，或者我是否必须创建一个请求并处理回调，或者我是否需要导入额外的 javascript 才能使用 json。因为我不知道如何让它发挥作用。它不起作用，因为最后数组是空的。感谢任何帮助。

json文件:

{"Users": [
    {"Name": "Jane",
        "Points": 67,
        "age": 23},
    {
        "Name": "Sam",
        "Points": 65,
        "age": 21}
]} 

选项 1 - 由另一个正在处理事件的函数调用的函数:

var getInformation = function() 
{
    var path = "./data/users.json";
    var informationArray= [];
    console.log("Loading ....");
    $.getJSON(path, function(data) 
    {
        $.each(data, function(key, val) 
        {
            informationArray.push(key + '-' + val);
        });
    }); 
    return informationArray; 
}

选项 2 - 由正在处理事件的另一个函数调用的函数:

var getInformation = function() { 
var path = "./data/users.json";
var informationArray= [];
$.ajax({
         url: path,
         async: false,
         dataType: 'json',
         success: function(response) {
         $.each(response.items,
         function(item) {
         informationArray.push(item);
         });
         informationArray.push("success");
         }
         }); 
   return informationArray; }

我看过以下线程并尝试了其中的内容，但对我不起作用。我想知道我的代码哪里有问题，或者是否需要任何特殊配置。

主题:Is there a version of $getJSON that doesn't use a call back?

Answer 1

当 JavaScript 在浏览器中运行时，它需要向服务器发出 AJAX 请求以访问 JSON 文件。可以手动编写 AJAX 请求，但这很复杂并且难以在所有浏览器中工作。相反，大多数人使用像 jQuery 这样的库。您需要在您的网页中包含 jQuery，例如:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

然后在 html 页面下方的任何脚本标记中，您应该能够执行如下操作:

$.ajax({
  url: "data/users.json",
  dataType: "json",
  success: function(response) {
    $.each(response.Users, function(item) {
      informationArray.push(item);
    });
    informationArray.push("success");
  }
});

参见 http://api.jquery.com/jQuery.ajax/