从 URL 获取 JSON 文件并显示

Posted 2023-02-22

【中文标题】从 URL 获取 JSON 文件并显示

【英文标题】：Get a JSON file from URL and display

【发布时间】：2012-07-12 12:00:04

【问题描述】：

代码很简单，不知道为什么不行。

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

这是使用 getJSON 的代码

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

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

【问题讨论】：

尝试使用较小的 JSON 字符串。

服务器是否配置为处理 JSONP 类型的请求？

【参考方案1】：

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

当不支持 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);

【参考方案2】：

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

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

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

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

更多详情请见https://developer.mozilla.org/en/http_access_control。

【参考方案3】：

它应该工作。

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

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

【讨论】：

如果从同一台服务器加载，它确实有效，谢谢！

【参考方案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": "[phone]",
  "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。