无法在 Google Chrome 中获取 JSON 文件? [英] Not able to fetch the JSON file in Google Chrome?

问题描述

<块引用>

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

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

我获取json文件的代码

function loadData(fileName) {//从远程文件中获取 json//通过返回 jqXHR 对象，我们可以在其上使用 .done() 函数//所以一旦请求成功返回，回调就会被执行返回 $.getJSON( 文件名 + ".json");}函数填充数据表(数据){//警报(数据)；//迭代 data.info 数组中的每个条目$.each(data.info, function(index, element) {//将其附加到表中$("#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.名称 +'" value="编辑"></input>' +'</td></tr>')});}$(document).ready(function(){//文件名.本例中的联系".var myFile = "联系人";loadData(myFile).done(function(data) {//检查我们是否真的得到了一些东西，以及数据是否具有 info 属性如果(数据&& data.info){//现在用我们的数据填充数据表填充数据表(数据)}});});

我的json文件

<代码>{信息":[{"name":"Noob Here","email":"[e-mail]",电话":123456"},{"name":"新手那里","email":"[e-mail]",电话":589433"}]}

我的html

<ul><li><a href="#fragment-1">列表</a></li><div id="fragment-1"><table id="联系人"><tr><th>名称</th><th>电子邮件</th><th>电话</th></tr>

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>

该代码在 Firefox 上运行良好，但在 Google Chrome 中不起作用.

在 Google Chrome

中获得的错误

XMLHttpRequest 无法加载 file:///home/user/jquery/contact.json.Access-Control-Allow-Origin 不允许 Origin null.

html 和 json 文件都在同一个位置.如何解决?

解决方案

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

但是，如果您希望 Chrome 在本地运行，您可以使用标志 --allow-file-access-from-files 启动 Chrome.

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

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

My code to fetch json file

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

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

My 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

<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 Firefox but not working in Google Chrome.

Error obtained in 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?

解决方案

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

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

这篇关于无法在 Google Chrome 中获取 JSON 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！