显示检索到的 JSON 内容时出错答案

【问题标题】：Error in displaying retrieved JSON content显示检索到的 JSON 内容时出错
【发布时间】：2010-11-28 15:31:22
【问题描述】：

继续我的问题here，我创建了一个测试应用程序来检查使用 jquery 的 json 解析。它似乎不起作用。我可以在 click 函数中附加数据。但是，从该 url 获取数据并解析似乎失败了。有人可以提供一些有用的提示吗？

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
         $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
        });


  });
});
</script>
</head>

<body>
<h2>Header</h2>
<p>Paragrapgh</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html>

TIA, 普拉文S

【问题讨论】：

标签： php javascript jquery html json

【解决方案1】：

提供回调以便您可以绕过同源策略。因此检索到的 JSON 数据包含在函数名称中，无法直接解析。使用 jquery 执行此操作的详细信息在 here 中给出。请参考下面给出的示例

<script>
 $.ajax({
         url:'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=jsonc&v=2&callback=?',
         dataType: "jsonp",
         timeout: 5000,
         success: function(data){
                    alert(data.apiVersion);
                    //add your JSON parsing code here
                  }

 });

</script>

请找到工作示例here。

【讨论】：

您可以在浏览器中尝试一下吗？我是整个网络开发的新手。我想知道是url错误还是代码错误。
当然，我会对此进行测试并恢复。 url是正确的，复制粘贴url到地址栏试试看。
Praveen，请查看处理 JSONP 请求的代码。这应该可以解决您的问题。如果您仍然遇到任何问题，请告诉我。干杯
嘿，谢谢你的代码。我现在可以解析并获取标题。你能给我一些链接，我可以在其中学习如何从 json 响应中获取所有元素。在我的上一个问题中，有一个链接，我从中获取了 val.title 变量，但是如何获取其他详细信息以及如何使用响应创建 html 正文？ TIA。
Praveen，我已经添加了您的代码的工作示例。 javascript 中的 JSON 本质上可以解析为数组和/或对象。为了解析它们，您需要知道您收到的 JSON 的文档结构。对于 youtube，可以在此处找到此文档 code.google.com/apis/youtube/2.0/developers_guide_jsonc.html

【解决方案2】：

url 不会像您想要的那样返回 json，尝试不使用 callback=function 通过回调，它使用一个名为 jsonp 的方法： http://ajaxian.com/archives/jsonp-json-with-padding

【讨论】：