如何使用JavaScript在服务器上加载和解析静态JSON文件

Question

如何使用JavaScript在服务器上加载和解析静态JSON文件

7

我刚开始学习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; }

我看到了下面的帖子并尝试了其中的方法，但对我无效。我想知道我的代码有什么问题，或者是否需要特殊配置。

帖子: 有没有不使用回调函数的 $ getJSON 版本？

- user2333683

什么是问题？什么没有起作用？ - Evan Davis

当你说你正在尝试解析一个本地文件时，是指在客户端还是服务器上？如果在服务器上，您需要使用文件的URL而不是路径。 - Justin

JSON是动态生成的还是来自于.json文件？因为JSON只是JavaScript，它也可以像脚本一样加载，并存储在本地内存中以供交互。这只是一个想法。 - oomlaut

问题在于哪里出错了，因为我打算将json文件的数据包含在其中的数组在函数结束时为空。我的意思是解析或访问json文件的元素。它不是动态的，是固定的信息。服务器上的本地json文件可以，我应该如何指定url？很好，我如何加载脚本以动态存储它，而不会导致效率问题？ - user2333683

我真的不明白为什么请求需要是同步的。服务器通信应该始终是异步的。 - Bergi

问题在于你的路径需要是一个URL，你调用./data/users.json是行不通的。它需要像http://yoursite.com/data/users.json这样的东西。 - Justin

2个回答

0

要加载一个JSON文件（而不需要回调），你可以使用：

var url = 'http://yoursite.com/data/users.json';
var j = [];
$.ajax({
  type: 'GET',
  url: url,
  dataType: 'json',
  success: function(data) { j = data;},
  async: false
});

alert(j.Users[0].Name);

- Justin

谢谢。我现在遇到了这个错误。未捕获的类型错误：无法读取未定义的属性'0'。顺便问一下，有没有办法动态设置URL？ - user2333683

1

它不起作用了，j数组是空的。我需要配置一些额外的库或其他东西吗？ - user2333683

是的，您可以动态设置URL，只需像上面的“选项2”中一样将其设置为变量即可。您使用的是什么URL？如果在浏览器中输入它，则应该显示JSON。 - Justin

由于我正在工作站上进行测试，并且使用的是Netbeans，所以我编写的URL是http://localhost:8383/Project/data/users.json。 - user2333683

@user2333683 确保你正在使用 async:false。 - prm296

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- olleicua · Accepted Answer

当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/。