如何使用 javascript 和 jQuery 从 JSON 中检索数据？

Posted 2023-03-04

技术标签:

【中文标题】如何使用 javascript 和 jQuery 从 JSON 中检索数据？【英文标题】：How to retrieve data from JSON with javascript and jQuery? 【发布时间】：2016-03-07 09:14:58 【问题描述】：

好的，所以我一直在尝试从该网站检索 JSON 格式的单个字符串： http://blog.teamtreehouse.com/api/get_recent_summary/?count=1

这是我的sn-p：

<html>
<head>
<title>Simple Page</title>
</head>
  <script src="jquery.js"></script>
    <script>
    $(document).ready(function() 
        $.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
         
            alert(data.title)
        );     
    );
    </script>
</html>

只是想获得一个简单的标题并将其显示为警报或只是将其写在网站上，但由于某种原因我无法正确使用。我还检查了我的 jquery 是否正常工作，所以不能这样。

提前致谢！

【问题讨论】：

可能是因为根 JSON 元素上没有 title 属性，而是在 posts 数组的每个元素上我会 console.write(data) 看看会发生什么，如果有的话。可能是 Title 而不是 title 或未返回 JSON 对象。这是我运行请求时得到的：“XMLHttpRequest 无法加载 blog.teamtreehouse.com/api/get_recent_summary/?count=1。请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”所以你只是无权读取此资源，除非服务器授予您权限我记得前段时间在一个应用中使用了这个json数据，我不明白为什么它现在不允许我访问它。检查他们是否提供 JSONP learn.jquery.com/ajax/working-with-jsonp 【参考方案1】：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS HTTP 标头丢失，因此您不能直接执行 AJAX 请求。您需要使用服务器端代理或使用http://crossorigin.me/ 服务从远程网站获取数据。

您正在访问的服务器提供 JSONP 支持，因此您可以通过在 URL 中添加 callback=? 将其转换为 JSONP 调用

$.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1&callback=?', function(data) 
 
    alert(data.posts[0].title)
);

如果不支持 JSONP，您可以使用 crossorigin.me 服务，但我不会依赖此服务进行生产使用。

$.getJSON('http://crossorigin.me/http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
         
            alert(data.posts[0].title)
        );

【讨论】：

【参考方案2】：

对于这种类型的错误，您还需要通过链接下方的请求检查来传递标头参数...

How to allow CORS? Getting Cross Origin Block Request [CORS] error when using .getJSON to get Play Store App Details

【讨论】：

【参考方案3】：

查看从提供的端点返回的数据，您的回调应为alert(data.posts[0].title)

【讨论】：

这是有道理的，但由于某种原因它仍然没有得到任何东西。

以上是关于如何使用 javascript 和 jQuery 从 JSON 中检索数据？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 javascript 或 jquery 为每个数组元素设置背景颜色和边框？

如何使用 javascript/jquery 从 URL 中删除获取变量和文件名？