解决jQuery加载器不显示：理解AJAX异步与UI更新-html教程-PHP中文网

解决jQuery加载器不显示：理解AJAX异步与UI更新

花韻仙語

发布： 2025-10-25 12:38:30

原创

234人浏览过

解决jQuery加载器不显示：理解AJAX异步与UI更新

本文深入探讨了在使用jquery ajax进行数据请求时，加载动画（如gif）无法正确显示的问题。核心原因在于将ajax请求设置为同步（`async: false`），这会阻塞浏览器主线程，导致ui更新无法执行。文章详细解释了同步与异步请求的区别，并提供了将请求设置为异步（`async: true`）以及正确管理加载器显示与隐藏的解决方案和最佳实践，确保用户界面的响应性。

理解AJAX与异步操作

在Web开发中，AJAX（Asynchronous JavaScript and XML）允许我们在不重新加载整个页面的情况下与服务器进行数据交互，极大地提升了用户体验。jQuery的$.ajax()方法是实现这一功能的强大工具。其中一个关键参数是async，它决定了AJAX请求是同步还是异步执行。

异步请求 (async: true)：这是$.ajax()的默认行为。当发起异步请求时，浏览器不会等待服务器响应，而是会继续执行后续的JavaScript代码和UI渲染任务。当服务器响应到达时，会通过回调函数（如success或error）处理结果。这种模式下，用户界面不会被阻塞，可以保持响应性。
同步请求 (async: false)：当发起同步请求时，浏览器会暂停执行所有JavaScript代码和UI渲染，直到服务器响应返回。这意味着在请求完成之前，用户无法与页面进行任何交互，页面会处于“冻结”状态。

async: false 导致加载器不显示的根本原因

当我们将$.ajax()的async参数设置为false时，就强制浏览器以同步方式执行请求。在这种情况下，即使你在AJAX请求之前调用了$('#imgLoader').show();来显示加载动画，这个UI更新操作也无法立即在浏览器中渲染出来。因为主线程被AJAX请求阻塞，浏览器没有机会去处理并绘制这个显示加载器的命令。只有当同步AJAX请求完全完成并返回结果后，主线程才会被释放，此时加载器可能已经失去了显示意义，或者在数据加载完成后才短暂闪现然后立即隐藏。

考虑以下原始代码片段：

function fnLoadVendorData() {
    // ... 其他逻辑 ...
    if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {
        $.ajax({
            type: "POST",
            url: "Ipfee.aspx/GetVendorData",
            data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false, // 问题所在：同步请求
            success: function (response) {                
                if (response.d != "NoDataFound") {
                    $('#imgLoader').show(); // 此时显示已晚，或者会被后续的hide立即覆盖
                    var getDatalist = JSON.parse(response.d);                    
                    Create_vendorDataTable(getDatalist);
                    $('#imgLoader').hide(); // 隐藏
                } else {
                    // ...
                }
                $('#imgLoader').hide(); // 无论如何都会隐藏
            },
            error: function (response, textStatus, errorThrown) {
                // ...
                $('#imgLoader').hide();
            }
        });
    }
}

登录后复制

在上述代码中，$('#imgLoader').show();被放置在success回调内部，这本身就意味着加载器只有在数据成功返回后才尝试显示，这与加载器的“加载中”语义相悖。更重要的是，即使尝试在$.ajax调用前显示，由于async: false的阻塞特性，加载动画也无法在请求期间正常渲染。

解决方案：拥抱异步并正确管理加载器

解决此问题的关键是将AJAX请求设置为异步，并确保加载器的显示和隐藏逻辑正确地包裹请求过程。

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

查看详情

设置 async: true (或移除该行，因为它是默认值)：这是最直接且最重要的修改。它允许浏览器在等待服务器响应时继续处理UI更新。
正确放置加载器显示/隐藏逻辑：
- 在发起AJAX请求之前显示加载器。
- 在AJAX请求的success和error回调函数中隐藏加载器，无论请求成功还是失败，都应确保加载器被隐藏，以防止其永久停留在页面上。

以下是修正后的代码示例：

<!-- HTML 结构，包含加载图片和表单元素 -->
<img src="Images/ipload.gif" id="imgLoader" style="display: none; width: 100%; height: 100%; z-index: 9999; position: fixed; top: 0; left: 0; background-color: rgba(255,255,255,0.7);" />

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <select name="ddlVendorName" id="ddlVendorName" class="form-control">
                <option value="--Select Vendor--">--Select Vendor--</option>
                <option value="1032">IPFEE_INDUS</option>
                <option value="1028">IPFEE_TVIPL</option>
                <option value="1033">IPFEE_ASCEND</option>
                <option value="1029">IPFEE_BIL</option>
                <option value="1031">IPFEE_GTL</option>
            </select>
            <label>Vendor Name</label>
        </div>
    </div>
    <div class="col-md-3 filterButton">
        <div class="form-group">
            <button type="button" class="btn btn-danger button" id="btnFilterClick"><i class="fa fa-filter" aria-hidden="true"></i>Filter</button>
        </div>
    </div>
</div>

<script>
    // 确保DOM加载完成后绑定事件
    $(document).ready(function () {
        $('#btnFilterClick').on('click', fnLoadVendorData);
    });

    function fnLoadVendorData() {
        var vendorSel = $("#ddlVendorName option:selected").text();
        var strCircle = $("#lblRole").text();

        if (vendorSel !== "--Select Vendor--" && typeof (vendorSel) !== 'undefined') {
            $('#imgLoader').show(); // 在AJAX请求发起前显示加载器

            $.ajax({
                type: "POST",
                url: "Ipfee.aspx/GetVendorData",
                data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true, // 关键修改：设置为异步
                success: function (response) {
                    if (response.d !== "NoDataFound") {
                        var getDatalist = JSON.parse(response.d);
                        Create_vendorDataTable(getDatalist);
                    } else {
                        jAlert("Data not available !!", "Information");
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    jAlert("请求失败: " + textStatus + " - " + errorThrown, "错误信息");
                },
                complete: function() {
                    // 无论成功或失败，请求完成后都隐藏加载器
                    $('#imgLoader').hide(); 
                }
            });
        }
    }

    // 假设 Create_vendorDataTable 函数已定义
    function Create_vendorDataTable(data) {
        console.log("Creating vendor data table with:", data);
        // 这里是创建或更新表格的实际逻辑
    }

    // 假设 jAlert 函数已定义 (例如使用jQuery UI Dialog或自定义弹窗)
    function jAlert(message, title) {
        alert(title + "\n" + message);
    }
</script>

登录后复制

注意事项：

complete 回调函数：jQuery AJAX的complete回调函数无论请求成功（success）还是失败（error）都会执行。这是一个非常适合放置隐藏加载器逻辑的地方，可以避免在success和error中重复编写相同的隐藏代码。
加载器样式：为了让加载器在请求期间真正覆盖页面并防止用户操作，可以考虑为其设置position: fixed、top: 0、left: 0、width: 100%、height: 100%以及一个半透明的背景色。
避免使用 async: false：在现代Web开发中，几乎所有场景都应该使用异步AJAX请求。同步请求会导致糟糕的用户体验，因为它们会冻结浏览器，尤其是在网络条件不佳或服务器响应缓慢时。

总结

当jQuery加载器（或其他UI更新）在AJAX请求期间不显示时，首先应检查async参数的设置。将async设置为true（或使用其默认值），并确保在请求发起前显示加载器，在请求完成（无论成功或失败）后隐藏加载器，是解决此类问题的标准做法。遵循这些最佳实践将有助于构建响应迅速、用户体验良好的Web应用程序。

以上就是解决jQuery加载器不显示：理解AJAX异步与UI更新的详细内容，更多请关注php中文网其它相关文章！