layui loading窗口

最新推荐文章于 2025-07-05 10:11:32 发布

原创最新推荐文章于 2025-07-05 10:11:32 发布 · 1.4w 阅读

5 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在网页中引入layui框架，并利用其加载层功能配合AJAX进行数据请求与处理。通过定义函数控制加载层的显示与关闭，实现用户体验优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入js
       <link href="../scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="../scripts/layui/layui.all.js"></script>



首先定义一个fales true
function showloading(t) {
            if (t) {//如果是true则显示loading
                console.log(t);
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            } else {//如果是false则关闭loading
                console.log("关闭loading层:" + t);
                layer.closeAll('loading');
            }
        }

  function cbr(s) {//别人做
            console.log("催别人做" + s);
            $.ajax({
                url: '/jyddo/ashx/JydDoHandler.ashx',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    action: 'cbrz',
                    s: s
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                Ajax会触发很多事件。
			有两种事件，一种是局部事件，一种是全局事件：

			局部事件：通过$.ajax来调用并且分配。
                beforeSend: function () {//这里是全局事件
                        // Handle the beforeSend event
                        //loading层
                        showloading(true);执行函数
                    },
                success: function (data, textStatus, jqXHR) {
                    showloading(false);//关闭loading
                    layer.msg(data.msg);//执行后台回执
                    if (data.status === 0) {
                         layer.msg(data.msg);
                        layer.msg("已催促工厂加工");
                        window.location.reload();
                    }
                }

            });