且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-25 12:17:52

正如jQuery API所说:使用GET HTTP请求从服务器中加载JSON编码的数据。 a href =http://api.jquery.com/jQuery.getJSON/ =noreferrer> http: //api.jquery.com/jQuery.getJSON/



所以你不能使用该函数加载本地文件。但是当你浏览网页时,你会发现从JavaScript文件系统加载文件非常困难,正如以下线程所说: 使用JavaScript访问本地文件


Hi I am trying to load local JSON file using JQuery to show data but i am getting some weird error. May i know how to solve this.

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

I am just alerting the count of JSON data. My JSON file is in the same directory where this html file is and JSON string format is shown below.

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

JSON file name priorities.json and error is

Uncaught Referenceerror priorities is not defined

As the jQuery API says: "Load JSON-encoded data from the server using a GET HTTP request."

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

So you cannot load a local file with that function. But as you browse the web then you will see that loading a file from filesystem is really difficult in javascript as the following thread says:

Local file access with javascript