javascript - jQuery AJAX 在 Laravel 5.2 中使用 jQuery 空闲超时中止

Question

我目前正在使用jQuery Idle Timeout在我的 Laravel 5.2 系统中。
它在我的本地计算机(MAMP Pro)中工作正常，但是当我将其上传到开发服务器时，AJAX get 请求给出“中止”错误:

问题出在哪里？

Laravel 路由代码:

Route::get('/keepalive', function () {
    return view('keepalive');
});

jQuery 代码:

$(function() {
// dialog is in the main layout after login = admin.blade.php
$("#dialog_session_timeout").dialog({
    autoOpen: false,
    modal: true,
    width: 400,
    height: 200,
    closeOnEscape: false,
    draggable: false,
    resizable: false,
    buttons: {
        'Yes, Keep Working': function() {
            $(this).dialog('close');
        },
        'No, Logoff': function() {
            // fire whatever the configured onTimeout callback is.
            // using .call(this) keeps the default behavior of "this" being the warning
            // element (the dialog in this case) inside the callback.
            $.idleTimeout.options.onTimeout.call(this);
        }
    }
});
// cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
var $countdown = $("#dialog-countdown");
var _token = $('meta[name="csrf-token"]').attr('content');
var data = {
    '_token': _token
};
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

// start the idle timer plugin
$.idleTimeout('#dialog_session_timeout', 'div.ui-dialog-buttonpane button:first', {
    //idleAfter: 5, // in seconds
    idleAfter: 7170, // 2 hours minus 30 seconds. 2 hours in the config/sessions.php
    pollingInterval: 10,
    //keepAliveURL: base_url + '/keepalive.php',
    keepAliveURL: base_url + '/keepalive',
    data: data,
    serverResponseEquals: 'OK',
    onTimeout: function() {
        window.location = "logout";
    },
    onIdle: function() {
        $(this).dialog("open");
    },
    onCountdown: function(counter) {
        $countdown.html(counter); // update the counter
    }
});

Answer 1

我也遇到过这种类型的问题，它在本地工作正常，但在生产服务器上却不行。由于 Ajax 选项而引发错误

timeout

jquery-idletimeout 插件中的默认 AJAXTimeout 选项为 250(毫秒)，有时对于请求来说较低。您需要在idletimeout初始化中显式定义“AJAXTimeout”选项，例如:

// start the idle timer plugin
$.idleTimeout('#dialog_session_timeout', 'div.ui-dialog-buttonpane button:first', {
    idleAfter: 7170, // 2 hours minus 30 seconds. 2 hours in the config/sessions.php
    AJAXTimeout: 2000,  // instead of 250 ms
    pollingInterval: 10,
    keepAliveURL: base_url + '/keepalive',
    //data: data,      // no option like this exist in idletimeout plugin
    serverResponseEquals: 'OK',
    onTimeout: function() {
       window.location = "logout";
    },
    onIdle: function() {
       $(this).dialog("open");
    },
    onCountdown: function(counter) {
       $countdown.html(counter); // update the counter
    }
});

或者转到“jquery.idletimeout.js”文件并注释ajax请求中的超时选项，如下所示:

$.ajax({
    //timeout: options.AJAXTimeout,
    url: options.keepAliveURL,
    error: function(){
        self.failedRequests--;
    },
    success: function(response){
        if($.trim(response) !== options.serverResponseEquals){
            self.failedRequests--;
        }
    },
    complete: function(){
        if( recurse ){
            self._startTimer();
        }
    }
});

注意:您不能在idletimeout选项中设置“data”属性，而是可以在jquery.idletimeout.js文件中存在的ajax请求中设置它，但实际上不需要设置该选项。 :)