尝试使用 JQuery 加载本地 JSON 文件以在 html 页面中显示数据答案

【问题标题】：Trying to load local JSON file to show data in a html page using JQuery尝试使用 JQuery 加载本地 JSON 文件以在 html 页面中显示数据
【发布时间】：2013-09-09 08:27:20
【问题描述】：

您好，我正在尝试使用 JQuery 加载本地 JSON 文件以显示数据，但我遇到了一些奇怪的错误。我可以知道如何解决这个问题。

<html>
 <head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        

<script type="text/javascript">
    $(document).ready(function(e) {
    $.getJSON( "priorities.json" , function( result ){
        alert(result.start.count);
    });
});
</script></head>
</html>

我只是提醒 JSON 数据的计数。我的 JSON 文件位于该 html 文件所在的同一目录中，JSON 字符串格式如下所示。

{
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

JSON 文件名priorities.json 和错误是

未定义未捕获的引用错误优先级

【问题讨论】：

检查您的 HTML 标记是否有未闭合的标签。 head 是否丢失或者您只是忘记复制和粘贴页面的这一部分？
我会解析，但首先在解析之前它给了我错误。
Chrome will not like this.
您的错误表明您正在尝试使用名为priorities 的未定义变量/对象，该变量/对象不存在和/或未定义。我认为该代码不对错误负责。
Joum 没有未定义的变量

标签： javascript jquery html json

【解决方案1】：

由于安全问题（同源策略），如果没有用户交互，javascript 访问本地文件会受到限制。

据https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs：

一个文件只有在其父目录下才能读取另一个文件源文件是目标文件的祖先目录。

想象一下这样一种情况：网站上的 javascript 试图在您不知情的情况下在系统中的任何位置窃取您的文件。您必须将其部署到 Web 服务器。或者尝试使用脚本标签加载它。像这样：

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript">
   $(document).ready(function(e) {
         alert(jsonObject.start.count);
   });
</script>

您的priorities.json 文件：

var jsonObject = {
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

或者在你的页面上声明一个回调函数并像jsonp技术一样包装它：

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js">    </script> 
     <script type="text/javascript">
           $(document).ready(function(e) {

           });

           function jsonCallback(jsonObject){
               alert(jsonObject.start.count);
           }
        </script>

 <script type="text/javascript" language="javascript" src="priorities.json"></script>

您的priorities.json 文件：

jsonCallback({
    "start": {
        "count": "5",
        "title": "start",
        "priorities": [
            {
                "txt": "Work"
            },
            {
                "txt": "Time Sense"
            },
            {
                "txt": "Dicipline"
            },
            {
                "txt": "Confidence"
            },
            {
                "txt": "CrossFunctional"
            }
        ]
    }
    })

使用脚本标签是一种类似于 JSONP 的技术，但这种方法不是那么灵活。我建议将其部署在 Web 服务器上。

通过用户交互，允许 javascript 访问文件。 File API 就是这种情况。使用文件 api，javascript 可以访问 用户从<input type="file"/> 选择的文件 或从桌面拖放到浏览器的文件。

【讨论】：

这是一个不错的小技巧
在这个“解决方案”中，priorities.json 不再是 JSON 文件，而是 JavaScript 文件。
你也有这个的 html 文件，我可以在哪里尝试运行？ @Khanh TO
@alper，我没有，但你可以轻松创建一个
这不好，我目前正在尝试修复 CSP 问题，只是将 json 文件称为 javascript 文件并没有任何好处）：

【解决方案2】：

您可以简单地在 HTML 中包含一个 Javascript 文件，将您的 JSON 对象声明为变量。然后，您可以使用 data.employees 从全局 Javascript 范围访问您的 JSON 数据，例如。

index.html：

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js：

var data = {
  "start": {
    "count": "5",
    "title": "start",
    "priorities": [{
      "txt": "Work"
    }, {
      "txt": "Time Sense"
    }, {
      "txt": "Dicipline"
    }, {
      "txt": "Confidence"
    }, {
      "txt": "CrossFunctional"
    }]
  }
}

【讨论】：

你知道有什么方法可以从 html 脚本中显示出来吗？不就是 console.log(data) 吗？
是的，data.js 中的代码可从 HTML 文档中全局获取，因此在 HTML 中的 <script> 元素中使用 data 或 data.start.count 即可。
这也是 JavaScript 而不是 Json 解决方案！ :(
它返回空文件，我应该为data.js写绝对路径，这也不起作用？ @senornestor
是的，对于离线数据测试，这是最好的！ :) 我在阅读以上所有答案时正在考虑它：p

【解决方案3】：

正如 jQuery API 所说：“使用 GET HTTP 请求从服务器加载 JSON 编码的数据。”

http://api.jquery.com/jQuery.getJSON/

因此，您无法使用该功能加载本地文件。但是当您浏览网页时，您会发现在 javascript 中从文件系统加载文件非常困难，如下线程所述：

Local file access with javascript

【讨论】：

其实我是用浏览器管理的 - qtweb.net。如果您在运行时启用一个选项，我认为它在 Chrome 中也是可行的（例如）：stackoverflow.com/questions/4819060/… .
是的，它适用于 chrome，但我认为这更像是一种 hack，而不是最终解决方案..

【解决方案4】：

app.js

$("button").click( function() {
 $.getJSON( "article.json", function(obj) {
  $.each(obj, function(key, value) {
         $("ul").append("<li>"+value.name+"'s age is : "+value.age+"</li>");
  });
 });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tax Calulator</title>
    <script src="jquery-3.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <ul></ul>
    <button>Users</button>
<script type="text/javascript" src="app.js"></script>
  </body>
</html>

article.json

{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}

server.js

var http = require('http');
var fs = require('fs');

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/') {
          response.writeHead(200,{"Content-Type":"text/html"});
          fs.createReadStream("./index.html").pipe(response);
  } else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
  } else if(request.method == 'GET' && request.url == '/app.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./app.js").pipe(response);
  }
  else if(request.method == 'GET' && request.url == '/article.json') {
          response.writeHead(200,{"Content-Type":"text/json"});
          fs.createReadStream("./article.json").pipe(response);
  }
}

http.createServer(onRequest).listen(2341);
console.log("Server is running ....");

Server.js 将在您的本地运行一个简单的节点 http 服务器来处理数据。

注意不要忘记在文件夹结构中添加 jQuery 库，并在 server.js 和 index.html 中相应地更改版本号>

这是我的跑步者https://github.com/surya4/jquery-json。

【讨论】：

【解决方案5】：

我一直在本地机器上复制的 d3.js 可视化示例..导入 .JSON 数据..在 Mozilla Firefox 浏览器上一切正常；在 Chrome 上，我收到跨域限制错误。导入本地 javascript 文件没有问题是一件很奇怪的事情，但是尝试加载 JSON 并且浏览器会变得紧张。至少应该有一些设置让用户覆盖它，弹出窗口被阻止的方式，但我看到了一个指示和选择取消阻止它们..没有理由对此事如此奥威尔式。用户不应被视为太天真，不知道什么对他们最有利。

因此，如果您在本地工作，我建议您使用 Firefox 浏览器。而且我希望人们不要为此大惊小怪，并开始轰炸 Mozilla 以对本地文件实施跨域限制。

【讨论】：

【解决方案6】：

我会尝试将我的对象保存为 .txt 文件，然后像这样获取它：

 $.get('yourJsonFileAsString.txt', function(data) {
   console.log( $.parseJSON( data ) );
 });

【讨论】：

这和getJSON有完全相同的问题。

【解决方案7】：

我使用了以下方法，但没有一个有效：

   // 2 Method Failed

        $.get(
            'http://www.corsproxy.com/' +
            'en.github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
            function (response) {
                console.log("> ", response);
                $("#viewer").html(response);
            });
// 3 Method Failed

    var jqxhr = $.getJSON( "./json/movies-coming-soon.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  console.log( "second complete" );
});

// 4 Method Failed

$.ajax({
   type: 'POST',
   crossDomain: true,
   dataType: 'jsonp',
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   success: function(jsondata){
    console.log(jsondata)
   }
})

// 5 Method Failed


$.ajax({
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   headers: {  'Access-Control-Allow-Origin': 'htt://site allowed to access' },
   dataType: 'jsonp',
   /* etc */
   success: function(jsondata){

   }
})

什么对我有用，只需下载名为“200 OK！”的 chrome 扩展程序或用于 chrome 的 Web 服务器并像这样编写我的代码：

// Worked After local Web Server

        $(document).ready(function () {
            $.getJSON('./json/movies-coming-soon.json', function (data) {
              var movie_name = '';
              var movie_year = '';
                $.each(data,function(i,item){
                    console.log(item.title,item.year,item.poster)
                    movie_name += item.title + "  " + item.year + "<br> <br>"

                    $('#movie_name').html(movie_name)


                })

            })

        })

这是因为如果不按照 CORS 策略运行本地 Web 服务器，您将无法访问本地文件，因此为了运行它，您必须拥有一些主机服务器。

【讨论】：