函数处理数据时实现按钮加载动画显隐 加载GIF不显示问题排查

问题原因 #

• 核心语法错误：你把AJAX的complete回调错误写在了.done()的else分支内，属于无效代码，加载器显示逻辑执行后没有正确的隐藏触发时机，同时代码块内冗余的$('')也属于无效语法
• 可能的资源路径错误：/static/img/loader.gif路径配置错误，导致图片无法正常加载
• 可能的层级问题：loader元素被其他页面元素遮挡，无法被视觉感知

修复步骤 #

1. 先验证静态资源与样式有效性 #

打开浏览器控制台，执行$('#loader').show()，如果能正常显示加载动画，说明路径和CSS没问题，否则先修正路径或补充loader样式，确保层级足够：

<div class="col-2">
  <button class="btn btn-primary float-start" type="submit">Get Data!</button>
  <!-- Image loader -->
  <div id='loader' style='display: none; z-index: 9999; position: relative;'>
   <img src='/static/img/loader.gif' alt="加载中"> <b>Loading..</b>
  </div>
</div>

2. 修正jQuery AJAX代码 #

把complete回调移到$.ajax的顶层配置项中，确保无论请求成功还是失败，都会触发加载器隐藏逻辑，修正后完整代码如下：

<script>
    $(document).ready(function() {
        $('#form1').on('submit', function(event) {
            $.ajax({
                data : {
                    input : $('#input').val(),
                },
                type : 'POST',
                url : '/price',
                beforeSend: function(){
                    // 显示加载器
                    $("#loader").show();
                },
                // 请求完成后统一隐藏加载器
                complete: function(){
                    $("#loader").hide();
                }
            })
            .done(function(data) {
                if (data.error) {
                    $('#ticker_id').text(data.error).show();
                    $('#successAlert').hide();
                }
                else {
                    $('#upper_price').text(data.upper_price).show();
                    $('#errorAlert').hide();
                }
            });
            event.preventDefault();
        });
    });
</script>

验证逻辑 #

1. 点击提交按钮后首先确认加载器是否正常显示
2. 等待请求返回后，确认无论返回成功还是错误，加载器都会自动隐藏

内容的提问来源于stack exchange，提问作者HumanBot