Question

我有以下代码

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    </head>
    <body style="background-color:yellow;width:100%;height:100%;">
        <a href="javascript:test()">test</a>
        <script>
            function test() {
                $("body").css("cursor","wait"); //cursor must be changed here

               $.ajax(...);
            }           
        </script>
    </body>
</html>

此代码的问题是，只有当函数default完成时，光标才会在浏览器中从wait更改为test()，但我需要在某个功能点更改它。我在Ubuntu 14和Windows 7的Opera中尝试过FF 58.我已经阅读了很多关于它的帖子并尝试了这个解决方案

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

但没有成功。怎么解决？有什么想法吗？

Answer 1

我找到了答案。我有我的ajax async:false -

$.ajax({ ...
     async: false,
      ...     
});

当我改为

时

$.ajax({ ...
     async: true,
      ...     
});

一切都开始按预期工作了。

Answer 2

你可以在发送之前使用这样的：

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......`enter code here`
 });

或者使用when和timeout：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function ajaxready() {
      setTimeout(function() {
        $.ajax({
          url: "https://www.w3schools.com/jquery/demo_test.txt",
          beforesend: function() {},
          success: function(result) {
            $("#div1").html(result);

            $("body").css("cursor", "");
          }
        });
      }, 500);



    }

    function loading() {
      $("body").css("cursor", "wait"); //cursor must be changed here
    }
    $(document).ready(function() {
      $("button").click(function() {
        $.when(loading()).done(function() {
          ajaxready();
        });


      });

    });
  </script>
  <style>
    button {
      cursor: inherit
    }
  </style>
</head>

<body>

  <div id="div1">
    <h2>Let jQuery AJAX Change This Text</h2>
  </div>
  <span></span>
  <button>Get External Content</button>

</body>

</html>

Answer 3

  $(document).ajaxStart(function (event, jqxhr, settings) {
        $(document.body).css({ 'cursor': 'wait' });
    });
    $(document).ajaxComplete(function (event, jqxhr, settings) {
        $(document.body).css({ 'cursor': 'normal' });
    });
    $(document).ajaxError(function (event, request, settings) {
        $(document.body).css({ 'cursor': 'normal' });
    });
    function AjaxCall() {
        $.ajax({
            type: "POST",
            url: '/home/AjaxURL',            
            contentType: "application/json; charset=utf-8",
            global: true,// this makes sure ajax set up ajaxStart/ajaxComplete/ajaxerror will triggered
            dataType: "json",
            success: function () { },
            error: function () { }
        });
    }
    $(document).ready(function () {
        AjaxCall();
    });

注意 - 将光标设置为document.body意味着它只适用于文档，不适用于其他dom元素，如锚点，文本框等

JS仅在js函数完成时才更改游标

3 个答案: