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

【问题标题】：Display loading gif when AJAX call is in progressAJAX 调用正在进行时显示加载 gif
【发布时间】：2020-07-23 20:32:06
【问题描述】：

如何在 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>

【问题讨论】：

我最初会显示 gif（按下按钮时），然后当响应出现时隐藏 gif。很难相信你找不到例子/tuts

标签： php ajax

【解决方案1】：

为 loadingImage 创建一个元素。在页面加载时默认隐藏图像。在按钮单击时显示 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>

【讨论】：

【解决方案2】：

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

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

this Stack OverFlow 问题中有一个很好的例子。

【讨论】：

不要只是复制粘贴重复的答案