jQuery getJSON工作在本地，但不能跨域

我一直在寻找，却找不到一个明确的答案。这就是。我有一个JSON文件(我去jsonlint验证，它说它很好)，看起来像这样(一些信息修改):

[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    },
    {
        "position":"2",
        "category":"B",
        "title":"Title to second story",
        "description":"The second story"
    },
    {
        "position":"3",
        "category":"B",
        "title":"Title to third story",
        "description":"The third story"
    }
]

我使用jQuery解析并使用以下函数放置一个html页面:

$.getJSON('page.json', function(data) {
  var items = [];
  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

它工作完美!现在我的问题是，JSON文件不会在本地托管，实际上会托管在一个单独的域中。所以我修改了我的代码如下(经过一些阅读)，希望能让它工作:

$.getJSON('http://www.otherdomain.com/page.json?format=json&callback=?', function(data) {
  var items = [];
  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

通过添加'callback'行，我停止得到一个"Failed to load resource"错误。然而，什么都没有发生。就好像我添加的函数根本不存在一样。我试着把所有这些都去掉，并添加一个简单的"警报(数据)"，但这甚至没有触发。我做错了什么?一个大问题是，我100%仅限于HTML和JavaScript工作(不是我的选择)。谢谢你的帮助!

编辑其他服务器无法动态向json文件中添加任何内容。因此，我通过围绕json(较小的样本)硬编码一个函数来修改:

storyData(
[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    }
])

现在一切正常!谢谢你的帮助!

您需要查看JSONP。

本质上，当您尝试从另一个域加载JSON时，它会失败，因为存在无法跨越的域边界。为了避免这种情况，您必须使用PAD it (JSONP中的P)。填充它本质上是将其包装在函数调用中(函数名称驻留在您的客户端)，例如"正常"JSON响应(例如，getjson.php):

{foo:'bar'}

带有parseJSON回调的JSON变成(例如，getjson.php?callback=parseJSON):

parseJSON({foo:'bar'})

注意回调中提供的值如何成为JSON响应现在封装的函数的名称。

那么您的客户端将希望将其传递给parseJSON，这是一个存在于您的客户端(您已经定义)上的函数。jQuery(和其他库)尝试通过生成一些"随机"函数，然后通过原始回调发送响应来为您处理这个问题(所有这些都是在底层完成的)。

如果你可以控制生成JSON的服务器页面，实现一个回调方法，这样你就可以提供JSON应该如何包装，这样你就可以在你的端使用它。(这只有在处理来自客户端当前所在页面以外的域的数据时才需要)。

更新

要从根本上解决你遇到的问题，你需要找到一种方法将JSON信息传递到JSONP调用中。不知道你的"页面"是什么语言。下面是它应该包含的伪代码逻辑:

if GET_VARIABLE("callback") is supplied
  print GET_VARIABLE("callback") and an open parenthesis
  print normal JSON data
  print closing parenthesis
else
  print normal JSON data
end if

如果你决定硬编码函数名，而不是允许它在url中作为"callback"提供，那么你需要记住它。对于下一个示例，假设我们将其命名为MyJSONPCallback

现在，在您的客户端代码中，您可以继续使用:

$.ajax({
  url: 'http://anotherdomain.com/page.json?format=json',
  dataType: 'json',
  jsonpCallback: 'MyJSONPCallback', // specify the callback name if you're hard-coding it
  success: function(data){
    // we make a successful JSONP call!
  }
});

对于那些使用MVC ActionResult来生成JSONP, ASP。. NET MVC并没有附带现成的JSONP支持，但是很容易添加:

http://nikcodes.com/2012/02/29/an-asp-net-mvc-jsonp-actionresult

浏览器不支持这种安全措施。你可以检查JSONP作为一种方法来解决这个问题，尽管它是一个巨大的安全风险，因为它依赖于运行javascript提供的域名，你得到JSON文本。

我没有深入研究这个问题，但我相信您的问题与同一域策略有关…您可能想看看这个:http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

看这篇文章——你必须提供一个有效的javascript对象包装在一个函数中。

http://en.wikipedia.org/wiki/JSONP

您希望返回如下内容:

parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

但是你的服务器端方法需要知道返回那个，而不仅仅是里面的JSON。jQuery所做的只是自动生成一个函数名(callback参数中的?)，然后计算从服务器返回的"函数"。服务器使用包含在其中的JSON创建函数调用。

Brad Christie的回答帮助我快速地使我的代码工作。我在这里创建了一个新条目，因为它比其他解简单一些。

下面是我从http://localhost:5000 - 运行的代码

(function() {
        var api = "http://www.localhost:3000/auget_from_server?format=json";
        var request = $.getJSON( api, {
            secret : 'secret', 
            appId : 'app', 
            emailId : 'abc@gmail.com',
            async: false,
            dataType : 'json',
          },
          function(data, result){
            $("div.some_div").append(JSON.stringify(data));
          });
        request.complete(function(d, status){
            console.log('Complete the request and got the data - ' + JSON.stringify(d) + '/' + status, filename);
        });
        request.error(function(err){
            console.log('Error happened - ', filename);
            console.log(err);
        });
        request.success(function( data, status, jqXHR ) {
            $("div.some_div").append(data);
        });

        })();

从http://localhost:3000/auget_from_server的位置，我返回以下JSON作为响应(这部分特定于流星，但它也将适用于非流星服务器)-

this.response.writeHead('200', {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'});
this.response.end(JSON.stringify([{'works_or_not' : 'works', 'name' : 'akaushik', 'application' : 'Qoll', 'message' : 'hello from server', 'currentTime' : dt+''}]));

在日志中打印以下内容-

Complete the request and got the data - {"readyState":4,"responseText":"[{"works_or_not":"works","name":"akaushik","application":"Qoll","message":"hello from server","currentTime":"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)"}]","responseJSON":[{"works_or_not":"works","name":"akaushik","application":"Qoll","message":"hello from server","currentTime":"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)"}],"status":200,"statusText":"OK"}/success

相关内容

最新更新

热门标签：