layui抓取表单数据
前端  /  管理员 发布于 4年前   480
注意事项:
1、layui 中提交按钮是基于“监听”机制实现的。
2、form.on() 的调用需置于 layui.use 的回调函数中。
3、末尾的 'return false' 不可或缺,以确保不会触发页面刷新。注意必须是 'return false',而不能简单写成 'return'。
抓取表单数据可按四步来实现:
1、禁用按钮。防止用户连续点击,需注意,在 Ajax 请求结束后(complete)再次显式启用按钮。
2、整合表单数据。很多时候,除了要获取正式表单的数据,还需要额外追加一些数据。
3、确定路径。有时候,同一个按钮可以表达多种操作,比如新增或修改。
4、发起请求。发起 Ajax 请求,向服务器传递参数,并在回调函数中对返回值做处理。
5、return false。
重要代码列举
1、HTML 声明
<form class="layui-form"> <input type="hidden" name="id" /> <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button></form>
如果仅需要监听效果(单击事件),则只需上述一个 button 以及 lay-filter 和 lay-submit。
如果需要收集表单元素的值,则还需要 form 以及其样式 layui-form。
2、js 事件监听
// 保存form.on('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(parent.layer.getFrameIndex(window.name)); } else { // 提示失败 layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 }); } } }); // end ajax return false;});
更多layui相关知识请关注layui框架。
以上就是layui抓取表单数据的详细内容,更多请关注其它相关文章!
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号