Layer弹窗返回数据回调

layer.open({
  type: 2,
  title: "Layer回调",
  shadeClose: true,
  shade: 0.4,
  area: ['50%', '50%'],
  content: "/Home/Contact",
  btn: ['确定', '关闭'],
  yes: function (index) {
  //当点击‘确定’按钮的时候,获取弹出层返回的值
  var res = window["layui-layer-iframe" + index].callbackdata();
  //打印返回的值,看是否有我们想返回的值。
  if (1) {
    alert("提交失败");
  } else {
    //最后关闭弹出层
    layer.close(index);
  }

  console.log(res);

  },
  cancel: function () {
  //右上角关闭回调
}
});

在Thinkphp5中结合layer弹窗来定制操作结果页面,可以通过以下步骤实现: 1. **引入layer弹窗库**: 首先,需要在项目中引入layer弹窗的库文件。可以通过CDN或者下载到本地项目中进行引入。 ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layer@3.1.1/dist/theme/default/layer.css"> <script src="https://cdn.jsdelivr.net/npm/layer@3.1.1/dist/layer.js"></script> ``` 2. **控制器中返回JSON数据**: 在Thinkphp5的控制器中,处理完业务逻辑后,需要返回JSON格式的数据给前端。可以使用`json`方法返回数据。 ```php <?php namespace app\index\controller; use think\Controller; use think\Request; class Index extends Controller { public function save() { // 处理业务逻辑 $data = [ 'status' => 1, 'message' => '操作成功' ]; return json($data); } } ``` 3. **前端页面中处理返回的JSON数据**: 在前端页面中,使用Ajax请求提交表单数据,并处理返回的JSON数据,根据返回的状态和信息显示layer弹窗。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Thinkphp5结合layer弹窗定制操作结果页面</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layer@3.1.1/dist/theme/default/layer.css"> <script src="https://cdn.jsdelivr.net/npm/layer@3.1.1/dist/layer.js"></script> </head> <body> <form id="myForm"> <input type="text" name="name" placeholder="请输入名称"> <button type="submit">提交</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); var formData = new FormData(this); fetch("<?php echo url('index/save'); ?>", { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.status === 1) { layer.msg(data.message, { icon: 1, time: 2000 }, function() { // 操作成功的回调 }); } else { layer.msg(data.message, { icon: 2, time: 2000 }); } }) .catch(error => console.error('Error:', error)); }); </script> </body> </html> ``` 通过以上步骤,你可以在Thinkphp5中结合layer弹窗来定制操作结果页面,提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值