Ответ 1
Chrome просто не разрешает делать ajax-вызовы локальным файлам. Обратитесь Это
Однако вы можете запускать Chrome с помощью флажка --allow-file-access-from-files, если вы хотите, чтобы он работал локально.
Возможный дубликат:
Проблемы с jQuery getJSON с использованием локальных файлов в Chrome
Оба моих файла html "index.html" и "contact.json" находятся в одной папке
Мой код для загрузки 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 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)
}
});
});
Мой json файл
{
"info": [
{
"name":"Noob Here",
"email":"[email protected]",
"phone":"123456"
},
{
"name":"Newbie There",
"email":"[email protected]",
"phone":"589433"
}
]
}
Мой 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 дает
<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css'; return false;" />
<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 cannot load file:///home/user/jquery/contact.json. Origin null is not allowed by Access-Control-Allow-Origin.
Оба файла html и json находятся в одном месте. Как это исправить?
Chrome просто не разрешает делать ajax-вызовы локальным файлам. Обратитесь Это
Однако вы можете запускать Chrome с помощью флажка --allow-file-access-from-files, если вы хотите, чтобы он работал локально.
Проверьте ответ здесь
попробуйте получить доступ к json файлу через http или использовать jsonp