前言
对于后端开发人员而言，Layui框架的确是一个非常友好的前端页面脚手架，用于开发一些管理后台系统类的项目非常便捷。只需要掌握了传统的Web静态页面开发的三要素：HTML，CSS和JavaScript，就可以轻松掌握对Layui框架的使用。
但是在项目实践中，通常也无需直接基于Layui框架进行开发，大多数情况下可以直接使用Layuimini模板，更加高效和便捷。
使用Layui框架常遇到的问题
对弹窗表单赋值
html代码：
<body><div class="layui-form" lay-filter="useradmin" id="useradmin"><div class="layui-form-item"><label class="layui-form-label">用 户 名</label><div class="layui-input-inline"><input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div></div>
</body>
JavaScript代码：
layer.open({type: 2,title: '编辑用户',content: 'xx.html',maxmin: true,area: ['500px', '450px'],btn: ['确定', '取消'],yes: function(index, layero){省略...},success: function(layero, index){// 方式一 其实就是获取的 子页面的 div var div = layero.find('iframe').contents().find('#useradmin'); // div.html() div里面的内容,不包含当前这个div// 方式二 var body = layer.getChildFrame('body', index); // body.html() body里面的内容 /* ---- 附加内容 看看就好 Begin ---- */var iframeWindow = window['layui-layer-iframe'+ index] // 方式一： 得到iframe页的窗口对象var iframeWindow = window[layero.find('iframe')[0]['name']]; // 方式二： 得到iframe页的窗口对象/* ---- 附加内容 看看就好 End ---- */// 测试 ：body.find("#username").val("admin"); // 方式一div.find("#username").val("admin"); // 方式二 }
});
下拉框不显示
html代码：
<div class="layui-form-item"><label class="layui-form-label">卡片类型</label><div class="layui-input-inline"><select name="type" id="type" lay-filter="type"><option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div>
</div>
JavaScript代码：
layui.use('form', function(){var form = layui.form; form.render();
});
发送Ajax请求
JavaScript代码：
layui.use(['form'], function () {var $ = layui.jquery,form = layui.form;$.ajax({url: "http://localhost:8080/add",cache: "false", // 设置为false将不会从浏览器中加载请求信息async: "false", // true所有请求均为异步请求dataType: "json", // 请求返回数据的格式type: "GET", // 请求方式success: function(data) {//请求成功后的回调方法console.log(data);},error:function () {//请求失败后的回调方法console.log("error: " + data);}});
}
【参考】
layui 对弹窗 form表单赋值
layui 下拉框不显示解决方法
JavaScript | 文本复制工具clipboard.js的使用详解
使用 $.ajax 发送json数据示例代码（GET、POST区别）