如何在 AJAX 请求中实现 jQuery 微调器图像答案

【问题标题】：How to implement a jQuery spinner image in an AJAX request如何在 AJAX 请求中实现 jQuery 微调器图像
【发布时间】：2013-10-18 09:03:08
【问题描述】：

我有一个 jQuery AJAX 请求，我想在请求加载时显示一个 ajax spinner gif，然后在请求成功后消失，任何人都可以建议在下面的 jquery 代码中实现它的最佳方法：

function updateCart( qty, rowid ){
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',
        success: function(data){                
            render_cart(data);
        }           
    });
}

【问题讨论】：

How to show loading spinner in jQuery? 的可能重复项

标签： jquery ajax json

【解决方案1】：

从ajax loader（GIF 图像）获取加载程序 gif
将此图片放在您要显示/隐藏的位置。
在 ajax 之前，显示此图像。
完成后，隐藏图片

function updateCart( qty, rowid ){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',                         
        success: function(data){                
            render_cart(data);
            $('.loaderImage').hide();
        },
        error: function (response) {
           //Handle error
           $("#progressBar").hide();

    }           
    });
}

【讨论】：

async = false 是什么意思？我应该更改代码中的任何内容吗？
你应该在调用成功函数时隐藏加载图像，你不觉得吗？ p/s：async: false 是个坏主意，除非你知道自己在做什么。
切勿使用async: false。除了在最新版本的 jQuery 中被弃用之外，这不是解决问题的方法。将hide()放入回调函数中。
ajax 中 error() 的原因是什么（抱歉，如果我的查询听起来很愚蠢）
我明白你的意思，这是一个好点 :) 非常感谢你的努力

【解决方案2】：

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

其中“#loadingDiv”是覆盖部分页面或整个页面的微调器 gif。

【讨论】：

【解决方案3】：

我用 gif 图像显示/隐藏 div。它就像一个魅力：

<script type="text/javascript">

    $("#progressBar").corner();  
    $("#progressBar").show();


    jQuery.ajax({
        url: "../Nexxus/DriveController.aspx",
        type: "GET",
        async: true,
        contentType: "application/x-www-form-urlencoded",
        //data: param,
        success: function (response) {
            //Manage your response.

            //Finished processing, hide the Progress!
            $("#progressBar").hide();
        },
        error: function (response) {
            alert(response.responseText);
            $("#progressBar").hide();

        }
    });

  </script>

【讨论】：

此外，您还可以使用 javascript 图片来确保图片立即显示出来。

【解决方案4】：

在Preloaders.net 上，您可以找到一个非常开放的代码以及纯 JavaScript 和 JQuery 格式的所有解释。你也可以在那里获取加载器图像

【讨论】：