如何使用Ajax从哈佛GSD获取日历？

Question

我试图通过Ajax设置它，这是我到目前为止所做的。我一直试图弄清楚这一点，似乎无法点击。

function getFunction()
{
$(".cals").click(function()
{
    $.get("http://events.cs50.net/api/1.0/calendars?campus=GSD&output=json", function(data, status) 
    {

        var response = "<h3>GSD Calenders</h3>\n";


        response = response + '<ul data-role="listview" data-inset="true" data-filter="true">\n';

        var jsonObject = JSON.parse(data);
        for (var i = 0; i < jsonObject.length; i++) {
            var calendar = jsonObject[i].calname;
            response = response
                + '<li><a href="#item">'
                + calendar
                + '</a></li>\n'; }


        response = response + '</ul>';


        $('#calendars').html(response);
    });
});
}

Answer 1

这是一个工作小提琴：http://jsfiddle.net/rW9gx/1/

我已将js更改为：

$(function() {

    $("#cals").click(function()
    {
        $.getJSON("http://events.cs50.net/api/1.0/calendars?campus=GSD&output=json", function(data, status) 
        {

        var response = "<h3>GSD Calenders</h3>\n";
        response = response + '<ul data-role="listview" data-inset="true" data-filter="true">\n';

            for (var i = 0; i < data.length; i++) {
                var calendar = data[i].calname;
                response = response
                    + '<li><a href="#item">'
                    + calendar
                    + '</a></li>\n'; 
            }
            response = response + '</ul>';
            $('#calendars').html(response);
        });
    });

});

一些东西：

您已将click事件处理程序包装在函数（getFunction）中，这意味着只有在触发后才应用处理程序。我不知道这是否有意，或者你的代码示例是否已满，但在小提琴中我已将其删除并将js包装在文档就绪函数中，以便在DOM具有时应用它加载。

我将json $.get改为$.getJSON，这只是在dataType: "json"或$.ajax电话中写$.get的捷径。这意味着您不必将返回数据解析为Json，因为这是您期望的。

否则它工作得很好。