如何在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();
  });