Layui弹出框 ajax交互数据

$(document).on('click', '.view', function() {
            var that = $(this);
            var itemid = that.attr('itemid');
            var type = that.attr('type');
            var title = '';
            if(type == 1){
                title = '查看企业名片ID';
            }else{
                title = '查看个人名片ID';
            }
           layer.open({
                type: 1,
                content: $('#openProductBox'),
                area: ['700px', '400px'], //宽高
                btn: ["确定"],
                btn1: function (index){
                 layer.close(index);
                    window.location.reload();
                },
                success: function () {
                    console.log(itemid);
                    table.render({
                        elem: '#openProductTable',
                        height: 200,
                        url:'{:url("data")}?itemid='+itemid+'&type='+type,
                        page: false //关闭分页
                        , cols: [[ //表头
                            {field: 'itemid', title: '名片ID', sort: true, fixed: 'left',templet: '<div><a class="iconfont icon-chakanbaogao" style="margin-left: 3%; color: #2196F3;border-radius: 5px; cursor: pointer;text-decoration: underline;" target="_blank" href="{{ d.m_url }}">{{ d.itemid }}</a></div>'}
                        ]]
                    });
                }
            })

})

效果
在这里插入图片描述
后台数据格式
return json([‘code’=>0,‘data’=>$list,‘msg’=>‘success’]);

layui是一个基于JavaScript的前端架,用于快速构建Web界面。在layui,前端与后端的数据交互可以通过多种方式来实现,下面我将介绍两种常见的方式。 1. Ajax请求:可以使用layui的内置模块layer和jquery的ajax方法来实现前后端数据交互。首先,在前端页面引入layui和jquery库,然后使用layui的layer模块来弹出提示或加载,再使用jQuery的ajax方法发送请求给后端接口。后端接收到请求后进行处理,并返回相应的数据给前端。前端接收到后端返回的数据后,可以使用layui的layer模块弹出提示或进行其他操作。 示例代码如下: ```javascript // 引入layui和jquery库 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://www.layuicdn.com/layui/2.6.8/layui.js"></script> // 在前端页面使用layui的layer模块 <script> layui.use('layer', function(){ var layer = layui.layer; // 发送Ajax请求 $.ajax({ url: '后端接口地址', type: 'POST', data: {key1: value1, key2: value2, ...}, success: function(data){ // 请求成功后的处理 layer.msg(data.msg); // ... }, error: function(){ // 请求失败后的处理 layer.msg('请求失败'); } }); }); </script> ``` 2. WebSocket:layui还提供了WebSocket模块layim用于前后端实时通信。WebSocket是一种全双工通信协议,可以在浏览器和服务器之间建立持久的连接,实现实时通信。通过layim模块,你可以方便地在layui使用WebSocket进行前后端数据交互。 示例代码如下: ```javascript // 引入layui库 <script src="https://www.layuicdn.com/layui/2.6.8/layui.js"></script> // 在前端页面使用layui的layim模块 <script> layui.use('layim', function(){ var layim = layui.layim; // 连接WebSocket var socket = new WebSocket('后端WebSocket地址'); // 监听WebSocket消息 socket.onmessage = function(event){ var data = JSON.parse(event.data); // 处理接收到的消息 layim.getMessage(data); }; // 发送WebSocket消息 layim.on('sendMessage', function(data){ socket.send(JSON.stringify(data)); }); }); </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值