javascript - 将 fullcalendar.io 与 JSONP 结合使用

Question

我正在尝试将公共(public)假期添加到完整日历中。 http://fullcalendar.io/

var actionUrl =  @Html.Raw(Json.Encode(@Url.Action("Calendar", "Lecture")));

        $('#fullcalendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            eventTextColor : "Black",
            eventSources: [

            {
                url: actionUrl,
                data: function() {
                    return {
                        campusIds: getCampusIds(),
                        lectureRoomIds: getLectureRoomsIds(),
                        lecturerIds: getLecturerIds(),
                        eventTypeIds: getEventTypeIds(),
                    }
                },
                error: function() {
                    alert('there was an error while fetching events!');
                },
                traditional: true
            },

            {
                url: "http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForMonth&month=1&year=2013&country=zaf?callback=?",
                error: function() {
                    alert('there was an error while fetching events!');
                },
            }
        ],

第一个事件源有效，它从我的 mvc Controller 获取 json。然而，第二个来源没有。我知道我需要使用 jsonp，我认为我需要将返回的数据映射到完整日历可以理解的内容，但我无法做到这一点。请协助!

谢谢

Answer 1

修改后的答案

我找到了解决方案。您为约会使用的服务具有 API 文档 here .相关部分:

JSONP

In each operation you can use JSONP like this: Sample URL returningpublic holidays in Austria for January 2013:JSON_URL?action=getPublicHolidaysForMonth&month=1&year=2013&country=aut&jsonp=myfunction

所以将 callback 更改为 jsonp 它应该可以工作。此外，如果您提供一个范围而不是一个月，它最适合 FC。您的 ajax 调用应如下所示:

events: function (start, end, timezone, callback) {
    console.log(start.format('YYYY-MMM'));
    $.ajax({
        type: "get",
        url: 'http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForDateRange&jsonp=?',
        data: {
            country: "zaf",
            fromDate: start.format('DD-MM-YYYY'),
            toDate: end.format('DD-MM-YYYY')
        },
        dataType: 'jsonp',
        contentType: 'application/json',
        success: function (data) {
            var events = [];
            $.each(data, function (i, holiday) {
                events.push({
                    start: moment({
                        year: holiday.date.year,
                        month: holiday.date.month - 1, //momentjs uses base 0 months
                        day: holiday.date.day
                    }),
                    title: holiday.englishName,
                    allDay: true
                });
            });
            callback(events);
        }
    }).fail(function (jqXHR) {
        alert("failed to get holidays");
    });

这是一个有效的 JSFiddle .

旧答案:(仍然适用于非 jsonp 服务器)

如果你试图做一个跨域的json请求(jsonp)，服务器需要支持它。

JSONP 请求是 wrapped in script tags因此必须是有效的 JS。文字对象不是有效的 JS(如 {a:'b'})。

jQuery 通过向服务器发送一个回调函数名称参数来处理这个问题。看起来像:

callback=jQuery21003313164389692247_1423682275577

服务器必须将响应数据包装在此函数中，如下所示:

jQuery21003313164389692247_1423682275577( {id:"2",name:"me"} );

现在是有效且可执行的 JS。

因此，除非该服务器的 API 允许 JSONP 请求，否则您不能对其执行跨域请求。 这是网络浏览器的安全限制。

作为替代方案，您可以通过服务器代理数据。让 fullcalendar 向您的服务器发出请求，服务器又从外部源加载数据并将其发送回客户端。