Question

您好我正在尝试使用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文件名的priority.json和错误是

未定义未参考的Referenceerror优先级

Answer 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>

您的priority.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>

您的priority.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"/>访问用户选择的文件，或从桌面删除到浏览器。

Answer 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"
    }]
  }
}

Answer 3

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

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

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

Local file access with javascript

Answer 4

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

所以如果您在本地工作，我建议使用Firefox浏览器。我希望人们不会对此感到不满，并开始轰炸Mozilla来强制执行本地文件的跨域限制。

Answer 5

<强> 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服务器来处理数据。

注意请勿忘记文件夹结构中的dd jQuery库，并在 server.js 和 index.html <中相应更改版本号/强>

这是我正在运行的https://github.com/surya4/jquery-json。

Answer 6

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

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

Answer 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服务器，就无法访问本地文件，因此，要运行该文件，您必须具有一些主机服务器。

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

7 个答案: