layui介绍以及前端的ajax post 列表

最近在写一套故障系统,其中使用到模态对话框,放大到全屏的需求,开始使用的bootstrap的组件,我们知道bootstrap的模态对话框位置,是封装的。由于自己的前端水平很差,改了一天源码,只是实现了全屏效果,没实现位置

不得已最后寻找别的前端组件。最后发现layui 国内的一套前端组件。其中含有有我们需求,于是就简单的研究下layui的适用方法,layui很容易上手,封装很“过分”,对于小白来说很简单,但是不利于深入研究。

layui官网地址:https://www.layui.com/

模态对话框地址:http://layer.layui.com/

效果:

代码:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="../../static/trouble_run/js/jquery-2.1.1.min.js"> </script>
 7     <script src="../../static/trouble_run/js/layer.js"> </script>
 8     <link  rel="stylesheet" href="../../static/trouble_run/css/layer.css">
 9     <link  rel="stylesheet" href="../../static/trouble_run/css/layui.css">
10 </head>
11 <body>
12 <button onclick="modle()">点我</button>
13 <script>
14     function modle() {
15 
16         layer.open({
17           type: 1 //Page层类型
18           ,area: ['500px', '300px']
19           ,title: '确认提交内容:'
20           ,shade: 0.6 //遮罩透明度
21           ,maxmin: true //允许全屏最小化
22           ,anim: 1 //0-6的动画形式,-1不开启
23           ,content: '<div style="padding:50px;">这是一个非常普通的页面层,传入了自定义的html</div>'
24            ,btn: ['提交内容','关闭'] //按钮
25             ,yes: function(index, layero){
26                 console.log('提交内容');
27                 layer.close(index);
28 
29             }
30         });
31     }
32 
33 </script>
34 </body>
35 </html>
复制代码

 

2、我们在前端,ajax的时候,给后端发送数据中,字典里value含有列表,如何后端获取呢?

直接print(request.POST)这是个字典。可以直接查看。结果是key名字+[]做为新的key 在该字典里。

 

posted @   evil_liu  阅读(960)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示