如何在Ajax加載中顯示“請稍候” GIF圖像

Question

我正在使用Ajax將請求發送到Web服務器，但是希望向用戶顯示GIF圖像，指示他們等待直到請求完成。

您能否幫我修改此代碼，以便在發送請求時加載GIF圖片。

jQuery(document).submit(function(e){
    var create_acct_form = jQuery(e.target);
    if(create_acct_form .is("#createacctform")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: create_acct_form .attr("action"), 
            data: create_acct_form .serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data);
                if( data.status == 'error' ) {
                    // error handling, show data.message or what you want.
                } else {
                    // same as above but with success
                    $("#createacctform")[0].reset();
                    $("#create_acct-info").html(data)
                }  
             }
        });
    }
});

Answer 1

您可以添加ajaxStart和ajaxEnd處理程序，並可以顯示加載圖像，如下所示：

$(document)
  .ajaxStart(function() {

    $(Some Image).show();
  })
  .ajaxStop(function() {

    $(Some Image).hide();
  });