AJAX 调用正在进行时显示加载 gif

Question

如何在 AJAX 正在进行时显示加载 gif 图像？之前没有，只是在 AJAX 进行时。AJAX 进度完成后，我需要在 div id #statusT 中显示值<script>    $(document).ready(function(){        $("#formT button").click(function (ev) {            ev.preventDefault()            if ($(this).attr("value") == "btn_tool") {                $.ajax({                    type: 'post',                    url: '<?php echo APP_NAME;?>functions/app_form.php',                    data: $('form').serialize(),                    success:function(data){                        $("#statusT").html(data);                    },                    error:function (){}                });            }        });    });</script>

Answer 1

创建一个用于加载图像的元素。页面加载时默认隐藏图像。单击按钮时显示 gif 图像，然后在 success() 和 error() 中再次隐藏它。

<script>

    $(document).ready(function(){

        $("#formT button").click(function (ev) {

            ev.preventDefault()

            $("#loadingImage").show(); // <---

            if ($(this).attr("value") == "btn_tool") {

                $.ajax({

                    type: 'post',

                    url: '<?php echo APP_NAME;?>functions/app_form.php',

                    data: $('form').serialize(),

                    success:function(data){

                        $("#loadingImage").hide(); // <---

                        $("#statusT").html(data);

                    },

                    error:function (){

                        $("#loadingImage").hide();  // <---

                        

                    }

                });

            }

        });

    });

</script>

Answer 2

您可以使用 JQuery 的 .hide() 函数隐藏 gif。

$('#loading-image').show();

$.ajax({

      url: uri,

      cache: false,

      success: function(html){

        $('.info').append(html);

      },

      complete: function(){

        $('#loading-image').hide();

      }

    });