layui进度条的实现

📖 正文内容

引入 Layui

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui 进度条 AJAX 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/css/layui.css">
</head>
<body>
    <div class="layui-progress" lay-showpercent="yes" lay-filter="demo">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/layui.js"></script>
</body>
</html>

编写 JavaScript 代码

<script>
layui.use(['element', 'jquery'], function() {
    var element = layui.element;
    var $ = layui.jquery;

    // 模拟 AJAX 请求
    function simulateAjaxRequest(callback) {
        var total = 100;
        var interval = setInterval(function() {
            total -= 10;
            if (total <= 0) {
                clearInterval(interval);
                callback();
            }
            element.progress('demo', (100 - total) + '%');
        }, 500);
    }

    // 模拟 AJAX 请求完成后的回调
    function onAjaxComplete() {
        alert('数据加载完成！');
    }

    // 触发 AJAX 请求
    $('#start-ajax').on('click', function() {
        simulateAjaxRequest(onAjaxComplete);
    });
});
</script>

<button id="start-ajax" class="layui-btn">开始 AJAX 请求</button>

解释

HTML 部分：

使用 <div class="layui-progress"> 创建一个进度条容器。

使用 <div class="layui-progress-bar"> 创建进度条的进度部分。

添加一个按钮 <button id="start-ajax" class="layui-btn">开始 AJAX 请求</button> 来触发 AJAX 请求。

JavaScript 部分：

使用 layui.use 加载所需的模块，包括 element 和 jquery。

定义 simulateAjaxRequest 函数来模拟 AJAX 请求。这个函数每隔 500 毫秒更新一次进度条，直到进度达到 100%。

定义 onAjaxComplete 函数作为 AJAX 请求完成后的回调函数，这里简单地弹出一个提示框。

绑定按钮的点击事件，触发 simulateAjaxRequest 函数。

4. 实际 AJAX 请求

如果你需要进行实际的 AJAX 请求，可以使用 jQuery 的 $.ajax 方法，并在请求过程中更新进度条。以下是一个示例：

<script>
layui.use(['element', 'jquery'], function() {
    var element = layui.element;
    var $ = layui.jquery;

    // 实际的 AJAX 请求
    function performAjaxRequest(callback) {
        $.ajax({
            url: 'your-api-endpoint',
            type: 'GET',
            dataType: 'json',
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            element.progress('demo', percent + '%');
                        }
                    }, false);
                }
                return xhr;
            },
            success: function(response) {
                callback(response);
            },
            error: function(xhr, status, error) {
                console.error('请求失败: ' + error);
            }
        });
    }

    // 模拟 AJAX 请求完成后的回调
    function onAjaxComplete(response) {
        alert('数据加载完成！' + JSON.stringify(response));
    }

    // 触发 AJAX 请求
    $('#start-ajax').on('click', function() {
        performAjaxRequest(onAjaxComplete);
    });
});
</script>

<button id="start-ajax" class="layui-btn">开始 AJAX 请求</button>

解释

performAjaxRequest 函数：

使用 $.ajax 发起 AJAX 请求。

在 xhr 函数中设置 progress 事件监听器，用于更新进度条。

在 success 回调中调用 callback 函数，传递响应数据。

在 error 回调中处理请求失败的情况。

onAjaxComplete 函数：

处理 AJAX 请求成功后的逻辑，这里简单地弹出一个提示框并显示响应数据。

绑定按钮点击事件：

当用户点击按钮时，触发 performAjaxRequest 函数。

希望这个示例能帮助你实现 Layui 进度条与 AJAX 请求的结合。如果有任何问题或需要进一步的帮助，请随时提问。

💡 示例代码

<div style='--en-codeblock:true;--en-blockId:2lt7TSyjV1n;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Layui 进度条 AJAX 示例&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/css/layui.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="layui-progress" lay-showpercent="yes" lay-filter="demo"&gt;
        &lt;div class="layui-progress-bar" lay-percent="0%"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/layui.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</div>

<div style='--en-codeblock:true;--en-blockId:PBNCTe63W9r;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>&lt;script&gt;
layui.use(['element', 'jquery'], function() {
    var element = layui.element;
    var $ = layui.jquery;

    // 模拟 AJAX 请求
    function simulateAjaxRequest(callback) {
        var total = 100;
        var interval = setInterval(function() {
            total -= 10;
            if (total &lt;= 0) {
                clearInterval(interval);
                callback();
            }
            element.progress('demo', (100 - total) + '%');
        }, 500);
    }

    // 模拟 AJAX 请求完成后的回调
    function onAjaxComplete() {
        alert('数据加载完成！');
    }

    // 触发 AJAX 请求
    $('#start-ajax').on('click', function() {
        simulateAjaxRequest(onAjaxComplete);
    });
});
&lt;/script&gt;

&lt;button id="start-ajax" class="layui-btn"&gt;开始 AJAX 请求&lt;/button&gt;
</div>

<div style='--en-codeblock:true;--en-blockId:dBx1SKBnWcX;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>&lt;script&gt;
layui.use(['element', 'jquery'], function() {
    var element = layui.element;
    var $ = layui.jquery;

    // 实际的 AJAX 请求
    function performAjaxRequest(callback) {
        $.ajax({
            url: 'your-api-endpoint',
            type: 'GET',
            dataType: 'json',
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            element.progress('demo', percent + '%');
                        }
                    }, false);
                }
                return xhr;
            },
            success: function(response) {
                callback(response);
            },
            error: function(xhr, status, error) {
                console.error('请求失败: ' + error);
            }
        });
    }

    // 模拟 AJAX 请求完成后的回调
    function onAjaxComplete(response) {
        alert('数据加载完成！' + JSON.stringify(response));
    }

    // 触发 AJAX 请求
    $('#start-ajax').on('click', function() {
        performAjaxRequest(onAjaxComplete);
    });
});
&lt;/script&gt;

&lt;button id="start-ajax" class="layui-btn"&gt;开始 AJAX 请求&lt;/button&gt;
</div>

layui进度条的实现

📖 正文内容

💡 示例代码

💭 技巧提示

📚 参考资料

💬 评论交流

📖 正文内容

💡 示例代码

💭 技巧提示

📚 参考资料

🔗 相关文章

💬 评论交流