2012-07-12 80 views
12

代码非常简单,我不知道它为什么能够工作。从URL获取JSON文件并显示

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

下面是使用的getJSON

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

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

+0

用较小的JSON字符串尝试。 – kiranvj 2012-07-12 17:08:39

+0

服务器是否配置为处理JSONP类型的请求? – 2012-07-18 20:16:43

回答

5

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

当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=? 

这上面的网址给你相同的JSON数据JSONP和解决所有的麻烦。

我用下面的代码,这对成功调用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); 
} 
1

它应该工作。

  1. 您是否在Firebug或其他调试控制台中观看过请求,会发生什么以及返回的响应?

  2. 请考虑同源策略,所以发出此请求的脚本也应该从webapp.armadealo.com加载。如果不是,你需要一个jsonp请求。请看:http://api.jquery.com/jQuery.ajax/

+0

如果从同一台服务器加载,它确实有用,谢谢! – rogerdpack 2018-02-21 05:05:17

5

如果您在Chrome中检查一下,你可能会看到这样的错误:

XMLHttpRequest cannot load http://webapp.armadealo.com/home.json . Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.

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

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

请参阅https://developer.mozilla.org/en/http_access_control了解更多详情。

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。它必须被包装为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格式的数据回调函数。 事情是这样的:如果当服务器正常嵌入的JavaScript函数调用的响应

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

JSONP才能使用。