尝试使用 JQuery 读取 Google Calender JSON 数据答案

【问题标题】：Trying to read the Google Calender JSON Data using JQuery尝试使用 JQuery 读取 Google Calender JSON 数据
【发布时间】：2013-10-21 19:46:52
【问题描述】：

我正在尝试从 JSON 响应中读取谷歌日历事件，但没有任何反应。我已经尝试过来自here 的代码，但这也不起作用。我正在将代码添加到我的 CMS 中，当我检查前端时，什么也没有出现。我什至尝试运行这个小提琴http://jsfiddle.net/bGdhD/，但这也没有提供任何响应。

我的谷歌日历网址是

https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime

<script>
var event = '';

var gclaData = 'https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime';


$.getJSON(gclaData,function(data){
    $.each(data.feed.entry, function(i, entry){
        event += '<div class="eventHolder">'; 
        event += '<div class="eventTime">'+ entry.gd$where[0].startTime+"</div>";
        event += '<div class="eventName">'+ entry.title.$t + "</div>";
        event += '<div class="eLink">'+ entry.link[0].href + "</div>";
        event += '</div>';
    });
    $('#output').html(event);
});
</script>

<div id="output"></div>

另外，这可能是一个跨域问题吗？

【问题讨论】：

标签： javascript jquery json google-calendar-api

【解决方案1】：

这不是跨域问题，因为响应包含Cross Origin Resource Sharing 标头：

access-control-allow-origin:*

问题是响应是 JSONP 响应，因此包含回调函数。这使其 JSON 无效（除非您剥离回调）。

选项1：如果在URL中设置&callback=?，jQuery会将响应视为JSONP：

var gclaData = 'https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime&callback=?';

选项 2：使用 $.ajax() 并剥离回调：

gdata.io.handleScriptLoaded(

同时去掉右括号和分号);。这将为您留下有效的 JSON 响应，需要使用 JSON.parse() 或类似方法将其从字符串解码为 Javascript 对象。

此外，响应中似乎没有 entry 数组或对象，因此您需要相应地修改您的成功事件。

最后一点，这行不通：

entry.gd$where[0]

如果变量名有特殊字符，请使用[] 表示法：

entry['gd$where'][0]

【讨论】：