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

Trying to load local JSON file to show data in a html page using JQuery

本文关键字：html JQuery 数据 显示 加载 JSON 文件      更新时间：2023-09-26

嗨，我正试图使用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，错误为

未定义未捕获的Referenceror优先级

您可以简单地在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"
    }]
  }
}

由于安全问题（同源策略），如果没有用户交互，则对本地文件的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可以访问文件。这就是文件API的情况。使用文件api，javascript可以访问用户从<input type="file"/>选择的文件，或者从桌面放到浏览器的文件。

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

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

因此，您无法使用该函数加载本地文件。但当您浏览web时，您会发现在javascript中从文件系统加载文件确实很困难，正如下面的线程所说：

使用javascript 访问本地文件

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.

我在本地机器上复制的d3.js可视化示例。。其导入.JSON数据。。所有功能在Mozilla Firefox浏览器上运行良好；在Chrome上，我得到了跨来源限制的错误。奇怪的是，导入本地javascript文件没有问题，但尝试加载JSON，浏览器会感到紧张。至少应该有一些设置让用户超越它，弹出窗口被阻止的方式，但我可以看到一个指示和一个取消阻止它们的选择。。没有理由在这件事上如此奥威尔式。用户不应该被视为太天真，不知道什么对他们最好。

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

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

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

我使用了以下方法，但都不起作用：

   // 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服务器，您就无法访问本地文件，所以为了运行它，您必须有一些主机服务器。

相关文章：