FullCalendar通过AJAX获取事件时，如何获取XHR对象并处理返回码（如401）

嗨Jaime，我明白你的需求啦——你想在FullCalendar获取事件数据的AJAX请求里捕获XHR对象，用来执行会话检查逻辑，当遇到401时跳转到登录页对吧？其实FullCalendar提供了灵活的events配置方式，咱们可以通过自定义AJAX请求来实现这个需求，具体做法如下：

核心思路 #

你之前直接把events设为URL字符串，这是FullCalendar的简化写法，它会自动帮你发起AJAX请求。但如果要控制请求的错误处理，咱们可以把events改成一个函数，手动发起AJAX请求，这样就能直接拿到XHR对象，调用你的checkUserSession函数了。

修改后的完整代码 #

$('[data-toggle="calendar"]').fullCalendar({
    themeSystem: 'bootstrap4',
    locale: 'es',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
    header: {
        left: 'title',
        center: '',
        right: 'prev,next today'
    },
    buttonText: {
        today: 'Hoy',
        month: 'Mes',
        week: 'Semana',
        day: 'Día'
    },
    displayEventTime: false,
    // 把原来的URL字符串改成自定义函数
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: '/myURL',
            dataType: 'json',
            // FullCalendar自动传递的时间范围参数，按需调整格式
            data: {
                start: start.format('YYYY-MM-DD'),
                end: end.format('YYYY-MM-DD')
            },
            success: function(response) {
                // 请求成功时，把事件数据传给FullCalendar渲染
                callback(response);
            },
            error: function(xhr) {
                // 请求失败时，拿到XHR对象执行会话检查
                checkUserSession(xhr);
            }
            // 如果需要不管成功失败都检查，也可以用complete回调
            // complete: function(xhr) {
            //     checkUserSession(xhr);
            // }
        });
    },
    eventRender: function (eventObj, $el) {
        $el.popover({
            title: 'Menú ' + eventObj.title,
            content: eventObj.description.replace(/\n/g, '<br>'),
            trigger: 'hover',
            placement: 'top',
            container: 'body',
            html: true
        });
    },
});

// 保留你的会话检查函数
function checkUserSession(xhr) {
    // Si es 401, es porque se debe redireccionar al login
    var response = xhr && typeof xhr.getResponseHeader === 'function' ? xhr.getResponseHeader("X-Responded-JSON") : null;
    if (response !== null) {
        var obj = JSON.parse(response);
        if (obj.status === 401) {
            //var href = obj.headers.location;
            //href = obj.headers.location.substr(0, obj.headers.location.indexOf('?ReturnUrl=') + 11) + '/' + location.pathname;
            redirectToLogin();
            return false;
        }
    }
    return true;
}

// 根据实际情况调整跳转逻辑
function redirectToLogin() {
    window.location.href = '/login'; // 替换成你的登录页URL
}

关键说明 #

1. 自定义events函数：这个函数会在FullCalendar需要加载事件数据时被调用，参数里的start和end是当前日历视图的时间范围，callback是用来把获取到的事件数据返回给FullCalendar的函数。
2. 手动AJAX请求：用$.ajax发起请求，这样就能在error（或者complete）回调里直接拿到XHR对象，传给你的checkUserSession函数处理。
3. 401处理：当检测到401状态码时，就会执行redirectToLogin跳转到登录页，和你其他AJAX请求的逻辑保持一致。

这样修改后，你就能完全掌控FullCalendar事件数据请求的错误处理流程啦～

内容的提问来源于stack exchange，提问作者jstuardo