组件 layui 表单抓取数据四步走
注意事项:
- layui 中提交按钮是基于“监听”机制实现的。
- form.on() 的调用需置于 layui.use 的回调函数中。
- 末尾的 'return false' 不可或缺,以确保不会触发页面刷新。注意必须是 'return false',而不能简单写成 'return'。
抓取表单数据可按四步来实现:
- 禁用按钮。防止用户连续点击,需注意,在 Ajax 请求结束后(complete)再次显式启用按钮。
- 整合表单数据。很多时候,除了要获取正式表单的数据,还需要额外追加一些数据。
- 确定路径。有时候,同一个按钮可以表达多种操作,比如新增或修改。
- 发起请求。发起 Ajax 请求,向服务器传递参数,并在回调函数中对返回值做处理。
- return false。
重要代码列举
- 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。
- 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 表单抓取数据四步走的更多相关文章
- java爬虫--jsoup简单的表单抓取案例
分析需求: 某农产品网站的农产品价格抓取 网站链接:点击打开链接 页面展示如上: 标签展示如上: 分析发现每日价格行情包括了蔬菜,水果,肉等所有的信息,所以直接抓每日行情的内容就可以实现抓取全部数据. ...
- react 项目实战(四)组件化表单/表单控件 高阶组件
高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...
- 使用Chrome快速实现数据的抓取(四)——优点
些一个抓取WEB页面的数据程序比较简单,大多数语言都有相应的HTTP库,一个简单的请求响应即可,程序发送Http请求给Web服务器,服务器返回HTML文件.交互方式如下: 在使用DevProtocol ...
- NET 5 爬虫框架/抓取数据
爬虫大家或多或少的都应该接触过的,爬虫有风险,抓数需谨慎. 爬虫有的是抓请求,有的是抓网页再解析 本着研究学习的目的,记录一下在 .NET Core 下抓取数据的实际案例.爬虫代码一般具有时效性,当 ...
- PHP的cURL库:抓取网页,POST数据及其他,HTTP认证 抓取数据
From : http://developer.51cto.com/art/200904/121739.htm 下面是一个小例程: ﹤?php// 初始化一个 cURL 对象$curl = curl_ ...
- PHP Curl模拟登录并抓取数据
使用PHP的Curl扩展库可以模拟实现登录,并抓取一些需要用户账号登录以后才能查看的数据.具体实现的流程如下(个人总结): 1. 首先需要对相应的登录页面的html源代码进行分析,获得一些必要的信息: ...
- 爬虫学习笔记(1)-- 利用Python从网页抓取数据
最近想从一个网站上下载资源,懒得一个个的点击下载了,想写一个爬虫把程序全部下载下来,在这里做一个简单的记录 Python的基础语法在这里就不多做叙述了,黑马程序员上有一个基础的视频教学,可以跟着学习一 ...
- django系列9--django中的组件(form表单)
modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...
- 分布式爬虫:使用Scrapy抓取数据
分布式爬虫:使用Scrapy抓取数据 Scrapy是Python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘. ...
随机推荐
- Java 循环和函数(方法)
1 for循环嵌套 简而言之,就是一个for循环语句里面,还有一个for循环语句. 外层循环,每循环一次,内层循环,循环一周. 示例 package java003; /** * 2017/9/1. ...
- 结对编程1 —— 基于GUI和Swing的四则运算题目生成器
合作伙伴 201421123102 王艳秋 201421123106 陈 雄 代码地址 题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI( ...
- C语言程序设计课程设计自查表格
课程设计自查表格 序号 项目 完成与否(完成打勾) 1 格式是否符合标准(缩进是否规范) 2 是否模块化设计(使用函数分解系统功能) 3 函数名否易懂(不得使用f1(int a1,int a2)这样的 ...
- 201521123008《Java程序设计》第二周实验总结
本周学习总结 ① 数据类型,其中char是占用两个字节的内存空间,其他和以前学过的一样.除了十进制位,整型也可以用八进制或者十六进制表示.浮点型不精确. ②运算符,算术,赋值,逻辑,位运算. ③str ...
- 201521123033《Java程序设计》第1周学习总结
1. 本周学习总结 (1)了解了JVM,JRE,JDK (2)配置java环境变量 (3)编译一些简单的java代码 2. 书面作业 为什么java程序可以跨平台运行?执行java程序的步骤是什么?( ...
- python实例编写(6)--引入unittest测试框架,构造测试集批量测试(以微信统一管理平台为例)
---恢复内容开始--- 一.python单元测试实例介绍 unittest框架又叫PyUnit框架,是python的单元测试框架. 先介绍一个普通的单元测试(不用unittest框架)的实例: 首先 ...
- Redis集群介绍
http://mt.sohu.com/20160601/n452401108.shtml
- Dodobox一个基于所有平台的嵌入式操作系统(OS)
DodoBox是为广大应用开始者提供的一个跨平台应用发布平台.它提供了客户端和服务器端的SDK及详细的开发者帮助文件,帮助开发者创建.移植软件应用或游戏应用. DodoBox基于OpenGL技术,提供 ...
- PostgreSQL使用MyBatis,insert时返回主键
MyBatis中普通的insert语句是这样的: <insert id="insert" parameterType="com.xxx.xxx.xxDo" ...
- 在github上实现页面托管预览功能
1.建立个人github pages 仓库 创建新仓库,命名规则为----"你的github账号.github.io", 如图所示: 我的账号是zxpsuper,所以我的个人域名仓 ...