Question

代码非常简单，我不知道为什么它会工作。

这是JSON文件http://webapp.armadealo.com/home.json

的链接

以下是使用getJSON

的代码

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

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

Answer 1

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

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

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

您可以粘贴您的网址并获取相应的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=?

以上网址将为您提供与JSONP相同的JSON数据，并解决所有问题。

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

$.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);
}

Answer 2

如果您查看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。

Answer 3

它应该工作。

您是否在firebug或其他调试控制台中查看过请求，会发生什么以及返回的响应是什么？
请考虑同源策略，因此发出此请求的脚本也应从webapp.armadealo.com加载。如果没有，您需要一个jsonp请求。请看：http://api.jquery.com/jQuery.ajax/

Answer 4

据我所知，您的服务器不支持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。它必须被包装起来作为JSONP工作，因为jQuery需要它。

所以你得到的回报是正确的，但这不是你需要的。您对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).');';
?>

JSONP只能在服务器在JavaScript函数调用中正确嵌入响应时使用。

从URL获取JSON文件并显示

4 个答案: