1

说我有这样的事情：

$('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 请求没有问题，一切正常

4

4 回答 4

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);
    }
});

经过测试和工作

于 2013-04-04T13:18:46.617 回答
0

您可以按照此问题的已接受答案尝试此操作。

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

页面上的任何 AJAX 调用都会更改光标。

于 2013-04-03T20:38:41.360 回答
0

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

$('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');
            }
        });
    }
});
于 2018-05-24T11:09:11.513 回答
0

设置async : true对我有用。

于 2018-05-24T10:28:36.270 回答