Question

我正在学习如何将json数据加载到.js文件中。我创建了一个employee.json文件。我保存了我的js和json文件并保存在桌面上。我想要做的是将json文件中的所有id放入js中的数组中。我不知道会出现什么问题。希望有人可以帮助我。先感谢您。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>JSON with jQuery</title>
    </head>

<body>
  <p id="demo"></p>
  <h1><h2>
  <script src = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
      var res = [];
      $.ajax({
          url: 'employee.json',
          dataType: 'json',
          type: 'get',
          cache: false,
          success: function(data) {
              $(data.people).each(function(index, value) {
                 res.push(value.id);
              });
          }
      });

      document.getElementById("demo").innerHTML = res.toString();
  </script>

</body>
</html>

{
"person": [
    {
        "id" : 1,
        "firstName" : "Lokesh"
    },
    {
        "id" : 2,
        "firstName" : "bryant"
    }
    {
        "id" : 3,
        "firstName" : "kobe"
    }
]
}

Answer 1

错误1：键入错误。 <script src = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>。您错误输入了脚本的src，意外添加了另一个<script>开始标记。
错误2：错位的声明。 document.getElementById("demo").innerHTML = res.toString();应放在success回调函数中，因此只有在服务器响应后才会执行。如果过早执行，res仍为[]。
错误3： type: 'GET'应该是method: 'GET'，根据文档（虽然'GET'是默认的，所以你不需要明确地写这个）。 / LI>

使用此：

<p id="demo"></p>
<h1><h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
      var res = [];
      $.ajax({
          url: 'employee.json',
          dataType: 'json',
          method: 'get',
          cache: false,
          success: function(data) {
              $(data.people).each(function(index, value) {
                 res.push(value.id);
              });
              document.getElementById("demo").innerHTML = res.toString();
          }
      });


  </script>

Answer 2

您无法使用本地json进行阅读。它给交叉原始请求失败。所以将文件（html和json）部署到我们的服务器并执行。或者将json数据放在某个网址（http://somesite/myjson）上，然后请求该网址并查看。

Answer 3

首先，JSON不应该像物理“文件”那样存在。它必须由后端语言/ Web服务等生成。手动创建的“文件”中的JSON标记在解析时具有很高的数据无效性。

解决方案

使用Web服务生成有效的JSON输出。从Javascript结束，使用：

JSON.stringify( data );

将json数据加载到js中

3 个答案:

解决方案