Question

说我有这样的事情：

$('button').live({
    click: function() {
        $('body').css('cursor', 'wait');
        var value = 1;
        $.ajax({
            type: 'GET',
            url: 'http://www.domain.com/site/index.php/controller/function',
            dataType: 'json',
            cache: false,
            async: false,
            data: { variable: value },
            success: function(data, textStatus, jqXHR) { // },
            error: function(jqXHR, textStatus, errorThrown) { // }
        });
        $('body').css('cursor', 'default');
    }
});

我正在尝试更改游标，因为AJAX请求需要几分钟才能返回响应，我需要用户不要认为他的浏览器崩溃或类似的东西。问题是这段代码中应该这样做的行不起作用。

有什么想法吗？

旁注：AJAX请求没有问题，一切正常

Answer 1

我最终得到了这个：

$('button').live({
    click: function() {
        console.log('change cursor...')
        $('body').css('cursor', 'wait');
        console.log('cursor changed, wait 1 second...')
        setTimeout(function() {
            console.log('make ajax request...')
            $.ajax({
                type: 'GET',
                url: 'http://www.domain.com/site/index.php/controller/function',
                async: false,
                success: function(data, textStatus, jqXHR) {
                    console.log('change cursor back...')
                    $('body').css('cursor', 'default');
                },
                error: function(jqXHR, textStatus, errorThrown) { // }
            });
        }, 1000);
    }
});

经过测试和工作

Answer 2

您可以根据接受的答案to this question尝试此操作。

$('body').ajaxStart(function() {
    $(this).css({'cursor':'wait'})
}).ajaxStop(function() {
    $(this).css({'cursor':'default'})
});

对于页面上的任何AJAX调用，将更改光标。

Answer 3

设置async : true对我有用。

Answer 4

您的请求是同步的，因此它会阻止浏览器一段时间 - 您可能看不到光标更改。所以我把它改成了异步。但是在请求之后需要将游标恢复到先前的状态。这是最终的代码：

$('button').live({
    click: function() {
        $('body').css('cursor', 'wait');
        var value = 1;
        $.ajax({
            type: 'GET',
            url: 'url_here',
            dataType: 'json',
            cache: false,
            async: true,
            data: { variable: value },
            success: function(data, textStatus, jqXHR) { // },
            error: function(jqXHR, textStatus, errorThrown) { // },
            always: function () {
                $('body').css('cursor', 'default');
            }
        });
    }
});

AJAX请求之前的代码行不起作用

4 个答案: