从URL获取JSON文件并显示

问题描述：

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

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

下面是使用的getJSON

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

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

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

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

答

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

当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); 
}

答

它应该工作。

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

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

答

如果您在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了解更多详情。

答

从我能说的是，你的服务器不支持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才能使用。

从URL获取JSON文件并显示

相关推荐