Question

我在页面中有这个jQuery：

<script>
$(document).ready(function () {
    $("#btnGetData").click(function () {
        var _begdate = $("#datepickerFrom").val();
        var _enddate = $("#datepickerTo").val();
        var _unit = $("#unitName").text();
        document.body.style.cursor = 'wait';

        $.ajax({
            type: 'GET',
            url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
                  .replace("un", encodeURIComponent(_unit))
                  .replace("bd", encodeURIComponent(_begdate))
                  .replace("ed", encodeURIComponent(_enddate)),
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function (returneddata) {
                $("body").html(returneddata);
            },
            error: function () {
                console.log('hey, boo-boo!');
            }
        });

        document.body.style.cursor = 'pointer';
    });
});
</script>

请注意，我尝试在点击处理程序的早期创建一个等待光标：

document.body.style.cursor = 'wait';

...然后在最后恢复为默认值：

document.body.style.cursor = 'pointer';

但是，它不起作用 - 光标永远不会改变。代码确实有效（ajax调用成功完成），但光标仍然是石头的，导致用户想知道是否发生了任何事情。

我还需要做些什么才能让光标变成等待的态度？

Answer 1

由于ajax调用的性质（即异步），代码执行第一行来更改光标

document.body.style.cursor = 'wait';

然后执行ajax调用（注意：它不等待响应）。

然后执行最后一行：

document.body.style.cursor = 'pointer';

这一切都发生得太快了，你可能没有注意到。

稍后，ajax响应将由success或fail回调处理程序接收和处理。

要在收到ajax响应（成功或失败）后始终更改光标，您需要添加另一个名为always的回调 - 类似于以下内容：

...
,
 always: function () {
       document.body.style.cursor = 'pointer';
  });
...

注意，根据Jquery的版本，这可以称为done()回调。

在此处查看文档：{{3}}

<强>更新

我将格式更新为当前练习并添加了缺少的调用...

＆＃13;

$(document).ready(function() {
  $("#btnGetData").click(function() {
    //var _begdate = $("#datepickerFrom").val();
    // var _enddate = $("#datepickerTo").val();
    // var _unit = $("#unitName").text();
    document.body.style.cursor = 'wait';

    $.ajax({
        type: 'GET',
        url: 'http://stackoverflow.com/',
        contentType: 'text/plain',
        cache: false
      })
      .done(function() {
        console.log('hey, success!');
      })
      .fail(function() {
        console.log('hey, boo-boo!');
      })
      .always(function() {
        console.log('hey, done!');
        document.body.style.cursor = 'pointer';
      });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnGetData">Get it</button>

＆＃13;

Answer 2

试试这个：

<script>
$(document).ready(function () {
    $("#btnGetData").click(function () {
        var _begdate = $("#datepickerFrom").val();
        var _enddate = $("#datepickerTo").val();
        var _unit = $("#unitName").text();
        document.body.style.cursor = 'wait';

        $.ajax({
            type: 'GET',
            url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
                  .replace("un", encodeURIComponent(_unit))
                  .replace("bd", encodeURIComponent(_begdate))
                  .replace("ed", encodeURIComponent(_enddate)),
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            }
    }).done(function(returneddata){
        $("body").html(returneddata);
    }).fail(function(){
        console.log('hey, boo-boo!');
    }).always(function(){
        document.body.style.cursor = 'pointer';
    });
});

我还将你的jquery“现代化”为使用done（），fail（）这些是更新的标准。 always（）处理程序（可能显然）总是在AJAX调用返回后运行。

我手写这个，所以我希望括号全部排成一行。我相信你会得到这个要点。

通过查看this jQuery doc，您会看到success，error已被弃用。

编辑：我为您创建了working fiddle。单击按钮后，小提琴将模拟5秒钟的AJAX调用。一个变化是我改变了html和body $('html,body').css('cursor','wait');

的样式

为什么我的jQuery等待游标代码不起作用？

2 个答案: