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 在该字典里。
学习是一种态度,坚持是质变的利器!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步