Question

我正在使用大量数据更新我的表单，因此我需要设置加载GiF图像，以便用户可以理解数据是否正在插入数据库。

我正在使用以下jquery。你能告诉我如何在成功（）执行之前显示这个加载图像吗？

loadubg.gif（这是我的加载图片）

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    var cid=$('#cdid').val();



    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
          // getDetails(cid);
          $("#success").html(data);
            document.getElementById("all_contact_details").reset();


        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 1

使用AjaxStart和AjaxComplete回调：

$( document ).ajaxStart(function() {
  $( ".loading" ).show();
});

$( document ).ajaxComplete(function() {
  $( ".loading" ).hide();
});

如果您不想进行全球回调，可以将这些回调放入$.ajax来电：

$.ajax({
    ...
    beforeSend: function(){$( ".loading" ).show();},
    complete: function(){$( ".loading" ).hide();}
    ...
});

此外，其他人都建议您在success处理程序中隐藏gif。这是不正确的。如果ajax调用导致错误，你的gif将继续旋转。 complete处理程序是正确的做法。

Answer 2

只需在调用$.ajax之前显示加载图片。

为您的加载图片创建div或img标记，并将其设置为display：none。

<img src="loading.gif" id="loading" style="display:none"/>

并像这样修改你的脚本

$('body').on('click', '#upload', function(e){

    e.preventDefault();
    $("#loading").show(); //show loading
    var formData = new FormData($(this).parents('form')[0]);

    var cid=$('#cdid').val();



    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
          // getDetails(cid);
          $("#success").html(data);
            document.getElementById("all_contact_details").reset();

        },
        complete: function(){
          $("#loading").hide(); //hide loading here
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 3

在ajax调用开始之前显示图像，并在完成后隐藏它。（假设GIF图像有id="gifImage"

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    var cid=$('#cdid').val();


    $('#gifImage').show();// show image here
    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        error: function(xhr, status, error) {
          $('#gifImage').hide();// hide image here
        },
        success: function(data){                    
          // getDetails(cid);
         $('#gifImage').hide();// hide image here
          $("#success").html(data);
            document.getElementById("all_contact_details").reset();


        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 4

也许最好的方法是在#upload被点击后立即将#success div设置为显示gif图像。

然后，成功方法将在完成后覆盖gif：

$('body').on('click', '#upload', function(e){

    // SHOW IMAGE AS SOON AS AJAX STARTS
    $("#success").html("<img src="loadubg.gif></img>");

    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    var cid=$('#cdid').val();



    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
          // getDetails(cid);

          // ONCE AJAX REQUEST FINISHED, OVERWRITE THE GIF IMAGE
          $("#success").html(data);

          document.getElementById("all_contact_details").reset();


        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 5

在调用jQuery.ajax（）之前显示加载图像。我们假设您有一个imageDiv来显示该图像。使用以下：

$("#imageDiv").html('<img src = "loadubg.gif">');
$("#imageDiv").show();
$.ajax({
    url: 'editContactDetails.php',
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
    },
    success: function(data){                    
      // getDetails(cid);
      $("#success").html(data);
        document.getElementById("all_contact_details").reset();
           $("#imageDiv").hide();

    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});
});

Answer 6

调用你的脚本/函数在进程中显示你的加载器，并在进程完成后隐藏你的加载器。

beforeSend: function(){
  //show img loader
},
complete: function(){
  //hide img loader
}

Answer 7

在HTML文件中添加Div

<div class="ajax-loader"></div>

然后在你的ajax调用中添加2个新参数。事前和完成

$.ajax({
    url: 'editContactDetails.php',
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
    },    
    beforeSend: function() {
        $(".ajax-loader").html("<img src="images/loader_image.gif">");
    },
    complete: function(){
        $(".ajax-loader").html("");
    },
    success: function(data){                    
      // getDetails(cid);
      $("#loading").hide(); //hide loading
      $("#success").html(data);
        document.getElementById("all_contact_details").reset();


    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

如何在执行jquery success（）之前显示GIF加载图像

7 个答案: