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>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $("#formT button").click(function (ev) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ev.preventDefault()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loadingImage").show(); // <---&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(this).attr("value") == "btn_tool") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '<?php echo APP_NAME;?>functions/app_form.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $('form').serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loadingImage").hide(); // <---&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#statusT").html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error:function (){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loadingImage").hide();&nbsp; // <---&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</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();      }    });