layer加载遮罩层使用 Ajax Loading Demo

封面图 • 2025-11-30 • JavaScript

在使用 **Layer**（一个轻量级的前端弹窗库）加载遮罩层时，通常会结合 **Ajax** 请求来实现“加载中”的效果。下面是一个简单的 **Ajax Loading Demo** 示例，展示如何在 Layer 中使用遮罩层。

---

## ✅ 示例：使用 Layer 加载遮罩层（Ajax 请求）

### 1. 引入必要的资源

确保你已经引入了 jQuery 和 Layer 的 JS/CSS 文件：

```html

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/theme/default/layer.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
```

---

### 2. HTML 页面结构（示例）

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layer Ajax Loading Demo</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/theme/default/layer.css" rel="stylesheet">
</head>
<body>

<h2>Ajax Loading with Layer</h2>
<button id="loadData">加载数据</button>

// 发起 Ajax 请求
            $.ajax({
                url: 'your-api-endpoint', // 替换为你的 API 地址
                type: 'GET',
                success: function (response) {
                    // 隐藏遮罩层
                    layer.close(loadingIndex);

// 处理返回的数据
                    alert('数据加载成功！\n' + JSON.stringify(response));
                },
                error: function (err) {
                    // 隐藏遮罩层
                    layer.close(loadingIndex);
                    alert('请求失败：' + err.statusText);
                }
            });
        });
    });
</script>

</body>
</html>
```

---

## 🔍 说明

- `layer.load()` 是 Layer 提供的加载提示方法，参数 `1` 表示加载样式（1~3），你可以根据需要修改。
- `shade: [0.3, '#000']` 设置遮罩层的透明度和颜色。
- 在 Ajax 请求完成后，使用 `layer.close(index)` 关闭遮罩层。

---

## 📌 注意事项

- 如果你使用的是 Layer 2.x 或更早版本，请参考官方文档确认 API 是否一致。
- 确保后端 API 支持跨域（CORS）或配置好代理，否则可能会出现请求失败。

---

如果你有具体的后端接口或者想添加更多交互效果（如进度条、自定义提示信息等），欢迎继续提问！