巧用jQuery选择器提高写表单效率的方法
19 浏览量
2020-12-06
01:46:49
上传
评论
收藏 69KB PDF 举报
巧用巧用jQuery选择器提高写表单效率的方法选择器提高写表单效率的方法
相信很多小伙伴都会遇到需要做表单的需求，就像我现在做的医院项目，茫茫多的表单无穷无尽。一开始做表单使用最笨的方
法：一个个span去定义ID，每个数据都用ajax获取后赋值显示，然后在表单提交前一个个用jQuery根据ID获取元素的value，
组成一个model来提交给服务器。
后来发现使用jQuery可以大大简化这个过程。于是我修改了工作方法，总结了我的一些提高写表单效率的方法。
需求需求
表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最
高的效率来完成这些表单的数据获取和数据提交。
注意：如果元素ID和服务器上获取的json字段的名字是一样的，那么这篇文章或许能对你提高工作效率有所帮助。
文本和文本框文本和文本框
对于文本和文本框，我们通常需要为元素添加ID来绑定和获取数据。
将数据显示到界面中
•用for循环遍历解析成功的JSON数据
•通过if判断过滤数据是span的还是input的。
•将数据传给和数据名同名的ID元素。
for (var key in json) {
//过滤type为text的文本框
if ($('#' + key).attr('type') == 'text') {
$('#' + key).val(json[key]);
}
if($('#' + key).prop('tagName') == 'SPAN'){
$('#' + key).text(json[key]);
}
}
快速获取数据对象用于提交服务器
•定义空model对象。
•通过jQuery选择器获取目标元素的value。
•将数据传入model中，对象元素的字段就是HTML元素的ID。
var model = {};
$('input[type="text"]').each(function () {
model[$(this).attr('id')]=$(this).val();
});
$('span').each(function () {
model[$(this).attr('id')]=$(this).text();
});
console.log(model);
按照如下方法，我们只需要照着后端提供的数据字段给HTML定义id，而JS就不需要写太多代码就可以完成表单了。再也不怕
表单字段太多了。
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.3.js"></script>
</head>
<body>
<div>
<div>
<label>姓名：<input type="text" id="name"></label>
<label>性别：<input type="text" id="sex"></label>
<label>年龄：<input type="text" id="age"></label>
<label>时间：<input type="text" id="time"></label>
</div>
<div>
<label>a：<span id="param01">1</span></label>
<label>b：<span id="param02">2</span></label>
<label>c：<span id="param03">3</span></label>
<label>d：<span id="param04">4</span></label>
</div>
</div>
评论0
最新资源