javascript 无法在 Google Chrome 中获取 JSON 文件？

Not able to fetch the JSON file in Google Chrome?

提问by Okky

Possible Duplicate:
Problems with jQuery getJSON using local files in Chrome

可能的重复：
在 Chrome 中使用本地文件的 jQuery getJSON 问题

Both my html file "index.html" and "contact.json" are on same folder

我的 html 文件“index.html”和“contact.json”都在同一个文件夹中

My code to fetch json file

我获取json文件的代码

function loadData(fileName) { 
    // getting json from a remote file
    // by returning the jqXHR object we can use the .done() function on it
    // so the callback gets executed as soon as the request returns successfully
    return $.getJSON( fileName + ".json");
}

function fillDataTable(data) {
//  alert(data);
    // iterate over each entry in the data.info array
    $.each(data.info, function(index, element) {
    // append it to the table
    $("#contact").append('<tr><td>' + element.name + '</td><td>'+ element.email +'</td><td>' + element.phone +'</td><td>' + '<input type="button" id="edit" onclick="edit(this.name)" name="'+ element.name +'" value="Edit"></input>' +'</td></tr>')
    }); 
}

$(document).ready(function(){

    // the file's name. "contact" in this example.
    var myFile = "contact";

    loadData(myFile).done(function(data) {
        // check if we acutally get something back and if the data has the info property
        if (data && data.info) {
            // now fill the data table with our data
            fillDataTable(data)
        }
    });
});

My json file

我的json文件

{
    "info": [
        {
            "name":"Noob Here",
            "email":"[email protected]",
            "phone":"123456"
        },
        {
            "name":"Newbie There",
            "email":"[email protected]",
            "phone":"589433"
        }
    ]
}

My html

我的html

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
    </ul>   
    <div id="fragment-1">
        <table id="contact">
        <tr>
        <th> Name </th>
        <th>E-mail </th>
        <th> Phone </th>
        </tr>
        </table>
    </div>
</div>

CDN give

CDN给

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

The code works fine on Firefoxbut not working in Google Chrome.

该代码Firefox在Google Chrome.

Error obtained in Google Chrome

获得的错误 Google Chrome

XMLHttpRequest cannot load file:///home/user/jquery/contact.json. Origin null is not allowed by Access-Control-Allow-Origin.

Both html and json file are in same location. How to fix it?

html 和 json 文件都在同一位置。如何解决？

采纳答案by Peter Herdenborg

Chrome simply doesn't allow ajax calls to be made to local files. Refer This

Chrome 根本不允许对本地文件进行 ajax 调用。参考这个

You can however launch Chrome with the flag --allow-file-access-from-files if you want it to get it working locally.

但是，如果您希望 Chrome 在本地工作，则可以使用标志 --allow-file-access-from-files 启动 Chrome。

回答by marbor3

Check the answer here

检查这里的答案

try to access json file via http or use jsonp

尝试通过 http 访问 json 文件或使用 jsonp