14

代码很简单，我不知道为什么它不起作用。

这是 JSON 文件的链接，http://webapp.armadealo.com/home.json

这是使用 getJSON 的代码

$.getJSON("http://webapp.armadealo.com/home.json", function(data){
alert(data);
});

我只想让代码显示整个 JSON 内容。

4

4 回答 4

6

经过这么多月的搜索，我找到了解决方案。因此，我正在回答我自己的问题。

当不支持 JSON 并且我们被同源策略卡住时，我们必须用填充包裹我们的 JSON 并使其成为 JSONP。

为此，我们有一个救生网站http://anyorigin.com/

您可以粘贴您的 URL 并获取相应的 JQuery 代码，如下所示， 

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){
$('#output').html(data.contents);
});

如果您想使用自己的代码，则只需使用上面代码中的 URL，即

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?

上述 URL 将为您提供与 JSONP 相同的 JSON 数据并解决所有问题。

我使用了以下代码，成功调用 displayAll 函数

$.ajax({
        url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',
        type: 'GET',
        dataType: "json",
        success: displayAll
    });

function displayAll(data){
    alert(data);
}
于 2013-03-01T21:33:30.420 回答
5

如果您查看 Chrome 检查器，您可能会看到以下错误：

XMLHttpRequest 无法加载http://webapp.armadealo.com/home.json。Access-Control-Allow-Origin 不允许来源http://stackoverflow.com 。

这意味着服务器不希望客户端网页读取文件。客户端不受信任。这是 XMLHttpRequest 的一项基本安全功能，以防止 mybank.evil.com 之类的网站从 mybank.com 下载数据。不幸的是，这使得从本地文件进行测试具有挑战性。

如果您信任任何具有您的数据或选定数量的站点的站点，您可以配置您的服务器脚本以发送Access-Control-Allow-Origin允许某些站点通过。

有关详细信息，请参阅https://developer.mozilla.org/en/http_access_control 。

于 2012-07-12T17:08:19.753 回答
1

它应该工作。

  1. 您是否在 firebug 或其他调试控制台中查看过请求，会发生什么以及返回的响应是什么？

  2. 请考虑same-origin-policy，因此发出此请求的脚本也应从 webapp.armadealo.com 加载。如果没有，您需要一个 jsonp 请求。看：http ://api.jquery.com/jQuery.ajax/

于 2012-07-12T17:07:02.587 回答
1

据我所知，您的服务器不支持 JSONP 的请求。例如

var getUrl = 'http://webapp.armadealo.com/home.json';
                $.ajax({
                    url : getUrl,
                    type : 'GET',
                    dataType : 'jsonp text',
                    jsonp: 'jsonp',
                    crossDomain : true,
                    success: function() { console.log('Success!'); },
                    error: function() { console.log('Uh Oh!'); },
                });

这会说SyntaxError: invalid label。您所拥有的返回的 JSONP 格式不正确。由于 jQuery 需要它，因此必须将其包装为 JSONP。

所以你得到的东西是正确的，但这不是你需要的。JSONP 调用所需的内容如下所示：

functionName({
  "mall": {
  "name": "South Shore Plaza",
  "city": "Braintree",
  "directory": "/assets/directory/0000/0094/show_floorplan.aspx",
  "postal_code": "02184",
  "street": "250 Granite St",
  "lng": -71.023692,
  "id": 147,
  "phone": "(781) 843-8200",
  "lat": 42.218688,
  "state": "MA"
}
});

...由于当前返回的不是有效的 JavaScript（本身就是这样），这就是 JSONP 的工作方式，因此响应实际上需要是可执行的 JavaScript。

只需将该代码直接放在页面中的一个<script>块中，您就会得到相同的错误。

如果您只是在嵌入数据之后，我推荐使用jQuery-oembed 之类的插件来执行此操作。如果您需要数据，则需要在服务器上处理 JSON，然后从服务器获取数据。

例如

所以假设我们想使用 jQuery 创建一个跨域。下面是 jQuery$.ajax调用的样子：

$.ajax({
  dataType: 'jsonp',
  data: 'id=test',
  jsonp: 'jsonp_callback',
  url: 'http://www.differentdomain.com/get_data.php',
  success: function () {
    // do something
  },
});

现在在服务器端（在get_data.php文件中），我们必须获取回调名称并以 JSON 格式发送包含在回调函数中的数据。像这样的东西：

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$data = array('1','2','3');
echo $jsonp_callback . '('.json_encode($data).');';
?>

只有当服务器正确地将响应嵌入到 JavaScript 函数调用中时，才能使用 JSONP。

于 2012-07-18T20:32:29.643 回答