怎么获取layer中的表单值_layui抓取表单数据注意事项:
1、layui 中提交按钮是基于“监听”机制实现的。
2、() 的调⽤需置于 layui.use 的回调函数中。
3、末尾的 'return false' 不可或缺,以确保不会触发页⾯刷新。注意必须是 'return false',⽽不能简单写成 'return'。抓取表单数据可按四步来实现:
1、禁⽤按钮。防⽌⽤户连续点击,需注意,在 Ajax 请求结束后(complete)再次显式启⽤按钮。
2、整合表单数据。很多时候,除了要获取正式表单的数据,还需要额外追加⼀些数据。
3、确定路径。有时候,同⼀个按钮可以表达多种操作,⽐如新增或修改。
4、发起请求。发起 Ajax 请求,向服务器传递参数,并在回调函数中对返回值做处理。
5、return false。
重要代码列举
1、HTML 声明
保存
如果仅需要监听效果(单击事件),则只需上述⼀个 button 以及 lay-filter 和 lay-submit。
如果需要收集表单元素的值,则还需要 form 以及其样式 layui-form。
2、js 事件监听// 保存
layui和bootstrap哪个好('submit(btnSave)', function (data) {
console.info('开始保存');
// * 按钮禁⽤
var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
if (isDisabled) {
return false;
}
/
/ * 整合表单数据
var formData = data.field;
$.extend(formData, { Id: $("#hiddenId").val() });
console.info(formData);
// * 确定路径
var url = "";
if (editMode == "add") {
url = urlEnum.Add;
} else if (editMode == "update") {
url = urlEnum.Update;
} else {
alert('编辑模型不确定, add / update');
return;
}
// * 发起请求
$.ajax({
data: formData,
type: "POST",
dataType: "JSON",
url: url,
beforeSend: function () {
// 禁⽤
$("#btnSave").addClass('layui-btn-disabled');
},
complete: function () {
// 启⽤
$("#btnSave").removeClass('layui-btn-disabled');
},
success: function (result) {
console.info("保存数据成功,返回的数据为:↓ ");
console.info(result);
if (result.Status) {
// 刷新列表
parent.$("#mainGrid").bootstrapTable("selectPage", 1);
// 确保在最后关闭窗体
parent.layer.close(FrameIndex(window.name)); } else {
// 提⽰失败
layer.alert(result.StatusMessage, { title: '提⽰信息', icon: 5 });
}
}
}); // end ajax
return false;
});
更多layui相关知识请关注layui框架。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。