现在的位置: 首页 > web前端 > 正文

layui抓取表单数据

2020年01月04日 web前端 ⁄ 共 1681字 ⁄ 字号 评论关闭

注意事项:

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抓取表单数据的详细内容,更多请关注学步园其它相关文章!

抱歉!评论已关闭.