使用 jQuery Ajax .done() 方法運行圖像加載

Question

我試圖在這個演示中創建一個簡單的加載動畫指示器。 在我的 jQuery Ajax 調用中，我嘗試將 Ajax 請求的新方法和樣式用作：

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

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

現在我的問題是.ajaxStart()和.ajaxComplete()是否與新版本的 jQuery 兼容？ 如果是這樣，我如何在req對象中調用它們？ 是否可以像req.ajaxStart()和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>

Answer 1

嘗試這個：

$("#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");
        });
    });
});

演示

Answer 2

根據您要使用的 AJAX 函數，您必須使用指定的completed函數來完成您要執行的操作。 您正在談論的這兩個 AJAX 函數旨在在文檔中發出的任何AJAX 請求上觸發，因此如果您有多個請求並且只想將其綁定到一個請求，則這並不可靠。

在你的情況下，它看起來像下面，我們使用你的load函數，然后在 AJAX 請求完成時使用completed函數。 請記住show和hide函數對於display: block和display: none分別是 CSS 屬性設置很方便，我將它們包含在下面的示例中。

<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 方法更適合這種情況。

無論您使用這些示例中的哪一個，您都應該為您的數據使用一個普通對象。 否則你應該使用上面的例子，或者你會使用get函數而不是使用post函數。

<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>

希望這對您有所幫助。

Answer 3

用這個：

$.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");
}
});