layui使用ajax请求时添加loading事件等待接口返回

在使用 layui 发送 Ajax 请求时，可以通过 `beforeSend` 和 `complete` 事件来添加 loading 效果。

例如：

// 发送 Ajax 请求前，显示 loading 效果
$.ajax({
  url: "/api/example",
  type: "POST",
  data: { name: "example" },
  dataType: "json",
  beforeSend: function() {
    // 显示 loading 效果
    layer.load(2);
  },
  success: function(res) {
    // 处理接口返回的数据
    console.log(res);
  },
  complete: function() {
    // 隐藏 loading 效果
    layer.closeAll("loading");
  }
});

其中 `layer.load(2)` 表示显示 loading 效果，数字 `2` 表示 loading 图标的样式，具体可参考 layui 官方文档。`layer.closeAll("loading")` 表示隐藏 loading 效果。

另外，如果需要在 Ajax 请求发生错误时也隐藏 loading 效果，可以在 `error` 回调函数中添加 `layer.closeAll("loading")`。

相关问题

layui通过open打开的弹窗ajax后不会自动关闭怎么实现

可以在ajax请求成功后，手动关闭弹窗。
比如，在ajax请求成功的回调函数中添加如下代码：

layer.closeAll('loading'); // 关闭loading层
layer.close(layer.index); // 关闭弹窗

其中，`layer.index` 表示当前弹窗的索引，可以通过 `layer.open()` 返回的索引获取。

集成layui后，如何处理异步请求后的数据显示？

在集成layui后处理异步请求的数据显示，一般可以采用以下步骤：

1. **发送请求**：使用Ajax、Fetch API或其他前端框架提供的数据获取工具，如axios、jQuery的$.ajax等，向服务器发起请求。示例：

   axios.get('/api/data')
     .then(response => {
         // 请求成功
         var data = response.data;
     })
     .catch(error => {
         // 处理错误
         console.error('Error:', error);
     });

2. **解析响应**：在`then`回调中，解析返回的JSON数据。可以用layui的table模块或者其他组件配合展示数据：

   layui.use(['table'], function(){
       var table = layui.table;
       table.render({
           elem: '#myTable', // 表格ID
           data: data, // 从服务器获取的数据
           cols: [[// 定义列宽和属性]]
       });
   });

3. **处理刷新或分页**：如果数据是分页或者需要动态加载的，可以在接收到新数据时，调用对应的表格刷新方法（`table.reload()`）。

4. **错误处理和加载提示**：当请求未完成时，可以显示一个加载提示，比如layui的loading层，直到数据加载完毕。