Question

所以我在我的网络服务器上有一个名为array.json的json文件我打算在我的网络应用程序本地（现在）读取这个文件，然后在我上线后在另一个域上，我创建了这个json归档自己，这里是它包含的数据。

 {"h1": "cmPanel", "h2" : "cmAuto", "h3": 0}

当我试图阅读文件时，我没有收到回复，为什么会这样？

这是我读取文件的代码;

$.getJSON('http://www.foobar.com/array.json', function(data){
     alert(data);
 });

我还尝试添加&callback=?但仍然没有收到任何内容，请你帮忙！

Answer 1

Quoting official docs:

由于浏览器安全限制，大多数“Ajax”请求都是   受同源政策的约束; 请求无法成功   从不同的域，子域或协议中检索数据。

脚本和JSONP请求不受同一来源的约束   政策限制。

More info about Same Origin Policy

To work around it, look into JSONP.

Answer 2

要进行跨域ajax调用，您需要使用proxy或JSONP。由于您已经为JSON设置，因此JSONP可能是最简单的替代方案。简而言之，JSONP需要在函数调用中包装JSON数据，以便以绕过Same Origin Policy的方式将其传递回调用脚本。

在你的情况下，你可以使用名为“myjsoncallback”的函数包装你的json数据，使它看起来像这样：

myjsoncallback({"h1": "cmPanel", "h2" : "cmAuto", "h3": 0})

然后将您的ajax调用更改为以下内容：

$.ajax({
    url: 'http://www.foobar.com/array.json',
    dataType: 'jsonp',
    jsonpCallback: 'myjsoncallback',                // Specify our callback function name
    success: function(data) { console.log(data); }
});

Answer 3

您是否可以从Web应用程序访问服务器？（同源政策）

要使用jsonp，您不能简单地将回调添加到json文件的URL。服务器应提供返回数据的函数。您可以使用默认的html脚本标记包含此文件，然后执行返回的函数。

Answer 4

要查看返回的json，您需要迭代结果

$.getJSON('array.json', function(data){
    var items = [];

   $.each(data, function(key, val) {
      items.push('Key = ' + key + '<br/>Value = ' + val + '<br/><br/>');
   });
   alert(items.join(''));
 });

Answer 5

array.json应该提供适当的Content-Type：
如果使用回调，则text/javascript; charset=utf-8 application/json; charset=utf-8如果是普通的json 见Best content type to serve JSONP? 避免来自“同源政策”的问题

无法从我的网络服务器读取本地服务器上的json文件

5 个答案: