0

我正在尝试在此演示中创建一个简单的加载动画指示器。在我的 jQuery Ajax 调用中，我尝试使用 Ajax 请求的新方法和样式：

 var req = $.ajax({
        type: "POST",
        url: "datapro.php"
        });

        req.done(function(data) {
         //do something
        )};

现在我的问题是 .ajaxStart()and.ajaxComplete()是否与新版本的 jQuery 兼容？如果是这样，我如何在req对象中调用它们？是否可以称它们为req.ajaxStart()and req.ajaxComplete()？

如果是这样，在哪里打电话给他们？我猜想req.ajaxComplete()在请求的最后使用，.done()但我很困惑在哪里使用req.ajaxStart(). 

 <script>
    $(document).ready(function(){
      $(document).ajaxStart(function(){
        $("#wait").css("display","block");
      });
      $(document).ajaxComplete(function(){
        $("#wait").css("display","none");
      });
      $("button").click(function(){
        $("#txt").load("demo_ajax_load.asp");
      });
    });
</script>
4

3 回答 3

0

尝试这个：

$("#wait").css("display","block");
$.ajax({
     type: "POST",
     url: "datapro.php",
     success: function(data) {
          $("#wait").css("display","none");
      }
});

演示

加载图片的出色工作

jQuery.fn.extend({
    loadImage:function(appendTo,callback){
       return this.each(function() {
           $("#wait").css("display", "block");
           $(this).load(function(){
               callback();              
              $("#wait").css("display", "none");
           }).appendTo($(appendTo));
       });
    }
});
$(document).ready(function () {    
    $("button").click(function () {
        var img="<img src='http://oi50.tinypic.com/16a4do9.jpg'>";
        $(img).loadImage("body",function(){
           alert("load");
        });
    });
});

演示

于 2014-09-09T08:28:02.460 回答
0

根据您要使用的 AJAX 功能，您必须使用指定的completed功能才能完成您想要做的事情。您正在谈论的这两个 AJAX 函数旨在在文档中发出的任何AJAX 请求上触发，因此如果您有多个请求并且只想将其绑定到一个请求，则不是很可靠。

在您的情况下，它看起来如下所示，我们使用您的load函数，然后completed在 AJAX 请求完成时使用该函数。请记住show，hide函数分别用于display: block和display: noneCSS 属性设置，我将它们包含在下面的示例中。

<script>
    $(function(){
        $("#wait").show();
        $("#txt").load("demo_ajax_load.php", function(response, status, jqxhr){
            // AJAX request has been completed
            $("#wait").hide();

            switch (status) {
                case 'error':
                    // Miscellaneous error occurred (use jqxhr.status and jqxhr.statusText for details)
                    break;
                case 'timeout':
                    // Connection timed out
                    break;
                case 'notmodified':
                    // Target URL resource has not changed since last visit
                    break;
                case 'success':
                    // All went well
                    break;
                case 'parsererror':
                    // JSON parser stumbled across to an error
                    break;
                default:
                    // jQuery error strings have changed since last time
                    break;
            }
        });
    });
</script>

您可以使用其中任何一个来发出 POST 请求，因此在您的情况下，任何一个都可以。对于不包含实际数据的请求，您不应该使用 POST 方法，GET 方法更好。

无论您使用这些示例中的哪一个，您都应该对数据使用普通对象。否则，您应该使用上面的示例，或者使用函数而不是使用post函数get。

<script>
    $(function(){
        $("#wait").show();

        var jqxhr = $.post("demo_ajax_load.php");

        jqxhr.done(function(response){
            // AJAX request was a success
            $("#txt").html(response);
        });

        jqxhr.fail(function(response){
            // AJAX request was a failure
        });

        jqxhr.always(function(response){
            // AJAX request was completed
            $("#wait").hide();
        });
    });
</script>

希望这对您有所帮助。

于 2014-09-09T08:28:25.440 回答
0

用这个：

$.ajax({
beforeSend:function(){
$("#wait").css("display","block");
},
 type: "POST",
 url: "url",
 success: function(data) {
      //do something here using data
  },
complete:function(){
$("#wait").css("display","none");
}
});
于 2014-09-09T08:35:37.877 回答