Ajax请求如何设置显示‘正在加载’？前端Ajax加载提示具体实现方法

时间：2026-07-07 18:10:30|栏目：AJAX相关|点击：次

如何给ajax设置正在加载

在Web开发中，用户体验的核心在于交互的即时性与反馈的明确性，对于基于Ajax技术的异步数据请求，最核心的解决方案是：在发起Ajax请求前显示加载状态（如Loading动画或遮罩层），在请求成功或失败的回调函数中隐藏该状态。 这一机制不仅能有效缓解用户等待时的焦虑感，防止重复提交,更是提升页面专业度和可信度的关键细节。

核心实现逻辑与代码示例

实现加载状态的关键在于精准控制DOM元素的显示与隐藏时机，以下以原生JavaScript和jQuery为例,展示最通用且高效的实现方式。

原生JavaScript实现方案

原生实现需要手动操作DOM元素,适用于轻量级项目或现代前端框架底层逻辑。

// 假设HTML中有一个id为loading的元素，默认隐藏
const loadingElement = document.getElementById('loading');
function fetchData() {
    // 1. 请求开始前：显示加载状态
    loadingElement.style.display = 'block';
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            // 2. 请求成功后：处理数据并隐藏加载状态
            console.log('数据获取成功', data);
            loadingElement.style.display = 'none';
        })
        .catch(error => {
            // 3. 请求失败时：提示错误并隐藏加载状态
            console.error('请求失败', error);
            alert('网络错误，请重试');
            loadingElement.style.display = 'none';
        });
}

jQuery全局钩子方案

如果项目中大量使用jQuery，通过全局事件监听可以极大简化代码，避免在每个请求中重复编写显示/隐藏逻辑。

// 请求开始前触发
$(document).ajaxStart(function() {
    $("#loading").show();
});
// 所有请求结束后触发
$(document).ajaxStop(function() {
    $("#loading").hide();
});

进阶优化：提升用户体验的专业建议

仅仅显示一个旋转图标是不够的，专业的加载状态设计需要遵循E-E-A-T原则中的“体验”维度,注重细节与反馈。

使用遮罩层而非局部加载

对于关键操作（如提交表单、删除数据），建议使用全屏或半透明遮罩层（Overlay），这能直观地阻断用户后续操作，防止因网络延迟导致的重复提交或数据冲突，遮罩层应包含清晰的文案，如“数据加载中，请稍候...”,而不仅仅是动态图标。

设置超时与错误处理

加载状态不能无限期存在，必须结合timeout属性设置请求超时时间（建议3-5秒），若超时未返回，应主动中断请求并隐藏加载状态，同时给予用户明确的错误提示，这不仅体现技术专业性,更是对用户时间的尊重。

骨架屏（Skeleton Screen）替代传统Loading密集型页面（如文章列表、商品详情），传统的旋转Loading会让用户感到页面“卡死”，采用骨架屏技术，在数据加载前展示页面结构的灰色占位图，数据加载完成后平滑替换为真实内容，这种渐进式加载方式能显著降低用户的心理等待时间，提升页面加载感知速度。

防止抖动与闪烁

加载状态的显示与隐藏应配合CSS过渡动画（Transition），避免突兀的显示或消失，使用opacity和visibility属性配合transition，实现淡入淡出效果,使交互更加丝滑自然。

常见误区与避坑指南

只在成功回调中隐藏Loading，若请求失败或超时，Loading状态将永久显示，导致页面功能瘫痪，务必在finally块或错误处理中确保状态重置。
Loading元素层级过低，若Loading图标被其他浮动元素覆盖，用户将看不到反馈，应确保Loading容器使用z-index设置较高的层级,并置于页面顶层。
过度使用Loading，对于毫秒级响应的操作，强行显示Loading反而会造成视觉干扰,应根据网络环境和操作耗时动态判断是否显示加载状态。