jQuery AJAX Progress-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00033/article/details/136775653

jQuery AJAX Progress

jquery-ajax-progressSimple patch that adds a 'progress' callback to jquery Ajax calls项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ajax-progress

是一个轻量级的jQuery插件，可以让你轻松地在你的网页中显示AJAX请求的进度信息。通过这个插件，你可以创建具有实时反馈功能的应用程序，提高用户体验并让用户更好地了解应用程序的状态。

能用来做什么？

jQuery AJAX Progress 可以用于各种Web开发场景。以下是它的一些主要用途：

文件上传: 显示文件上传进度条，给用户带来更好的体验。
长时间运行操作: 当用户执行长时间运行的操作时（如搜索、数据库查询等），展示进度信息以减少用户的等待焦虑。
分页加载: 在分页应用中显示数据获取进度，让用户知道页面正在加载中。
模块化应用: 在模块化应用中实现异步组件加载，并提供实时进度更新。

主要特点

轻量化: 该插件体积小巧，易于集成到现有项目中。
兼容性: 支持所有现代浏览器以及部分旧版浏览器。
自定义样式: 可以方便地自定义进度条样式以匹配你的网站设计。
容易使用: 与jQuery API无缝集成，只需要简单几行代码即可实现实时进度显示。

使用方法

引入依赖库

首先，在HTML文档中引入jQuery和jQuery AJAX Progress插件的CSS及JS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX Progress 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://gitcdn.xyz/cdn/englercj/jquery-ajax-progress/v1.0.0/dist/css/jquery-ajax-progress.css">
    <script src="https://gitcdn.xyz/cdn/englercj/jquery-ajax-progress/v1.0.0/dist/js/jquery-ajax-progress.js"></script>
</head>
<body>
...
</body>
</html>

创建进度条容器

在HTML文档中创建一个用于显示进度条的元素：

<div id="progress-bar"></div>

初始化插件

在jQuery的$(document).ready()函数中初始化插件：

$(document).ready(function () {
    $("#progress-bar").ajaxProgress();
});

发起AJAX请求

发起一个带有X-AJAX-Progress头的AJAX请求：

$.ajax({
    url: "your-api-url",
    type: "GET",
    headers: {
        'X-AJAX-Progress': true
    },
    success: function (response) {
        // 处理响应数据
    }
});