前言
对于后端开发人员而言，Layui框架的确是一个非常友好的前端页面脚手架，用于开发一些管理后台系统类的项目非常便捷。只需要掌握了传统的Web静态页面开发的三要素：HTML，CSS和JavaScript，就可以轻松掌握对Layui框架的使用。
但是在项目实践中，通常也无需直接基于Layui框架进行开发，大多数情况下可以直接使用Layuimini模板，更加高效和便捷。
使用Layui框架常遇到的问题
对弹窗表单赋值
html代码：
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代码：
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区别）