这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了利用 JS 轻松实现获取表单数据。方法有别于原始的做法,大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下,希望对大家有所帮助
接触过 Angularjs 的都知道, ng 支持双向绑定,我们可以轻轻松松的通过 ngModel 将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过 ID 去重新抓取输入框信息了。那对于我们开发前台网站,不用 ng 一类的 MVVM 框架,只引用了 Jquery,那么在处理表单的时候该怎么做呢。
一. 原始做法
- <div id="form">
- <select id='select1'>
- <option value="">
- --请选择--
- </option>
- <option value="1">
- --1--
- </option>
- <option value="2">
- --2--
- </option>
- <option value="3">
- --3--
- </option>
- </select>
- <input id='radio1' type="radio" />
- <input id='text1' type="text" />
- <textarea id='textArea1'>
- </textarea>
- </div>
程序员 A 会说, So easy, 通过 Jquery id 去获取每个输入框的值就 OK。多简单。
- function getEntity() {
- return {
- select1: $("#select1").val(),
- radio1: $("#radio1").prop('checked'),
- text1: $("text1").val(),
- textArea1: $("textArea1").val()
- }
- }
二. 升级做法.
程序员 B 说, 这样不行哦,很多页面都有表单提交, 那不是每个地方都要用 Jquery 去获取值,如果以后新增了输入框,每次 html 修改了,还要修改对应的 JS,多麻烦。于是爱偷懒的程序员 B 想到了一种方法,通过自定义标签来实现。
2.1 我们将表单包装到一个 form 的 div 下,每个输入的控件新增一个 data-field 属性. data-field 里面写构建实体的属性名称,考虑到会出现嵌套的对象。所以 data-field 里面属性名称通过 . 点来隔开,譬如 data-field='Person.Name' 后面就会构建出 {Person:{ Name:xxx}} . 下面的是没有嵌套的对象的例子
- <div id="form">
- <select data-field='select1'>
- <option value="">
- --请选择--
- </option>
- <option value="1">
- --1--
- </option>
- <option value="2">
- --2--
- </option>
- <option value="3">
- --3--
- </option>
- </select>
- <input data-field='radio1' type="radio" />
- <input data-field='text1' type="text" />
- <textarea data-field='textArea1'>
- </textarea>
- </div>
2.2 提供一个 getEntity 方法。 读取外层的 Form 然后找到所有的 data-field 属性去遍历. 因为输入框有 checkbox 和 radio,input 和 select, 所以判断类型先取出值。然后调用 getField 方法构建实体。代码就不做详细解答了。应该都能看懂。只是想表达一下思路想法而已。
- function getEntity(form) {
- var result = {};
- $(form).find("[data-field]").each(function() {
- var field = $(this).attr("data-field");
- var val;
- if ($(this).attr('type') == 'checkbox') {
- val = $(this).prop('checked');
- } else if ($(this).attr('type') == 'radio') {
- val = $(this).prop('checked');
- } else {
- val = $(this).val();
- }
- // 获取单个属性的值,并扩展到result对象里面
- getField(field.split('.'), val, result);
- });
- return result;
- }
- function getField(fieldNames, value, result) {
- if (fieldNames.length > 1) {
- for (var i = 0; i < fieldNames.length - 1; i++) {
- if (result[fieldNames[i]] == undefined) {
- result[fieldNames[i]] = {}
- }
- result = result[fieldNames[i]];
- }
- result[fieldNames[fieldNames.length - 1]] = value;
- } else {
- result[fieldNames[0]] = value;
- }
- }
2.3 下面来看看上面输出的结果, 哈哈值取到了。
2.4 下面我们来看看看嵌套的对象
- <div id="form">
- <select data-field='Person.Job'>
- <option value="">
- --职位--
- </option>
- <option value="java工程师">
- java工程师
- </option>
- <option value="net工程师">
- .net工程师
- </option>
- <option value="python工程师">
- python工程师
- </option>
- </select>
- <input data-field='Person.Desc' type="text" />
- </div>
2.5 提供了获取实体的方法,当然也要提供赋值的方法呀。下面来看看赋值的方法
- function setEntity(form, entity) {
- $(form).find("[data-field]").each(function() {
- var field = $(this).attr("data-field");
- fieldNames = field.split('.');
- var value = JSON.parse(JSON.stringify(entity));
- for (var index = 0; index < fieldNames.length; index++) {
- value = value[fieldNames[index]];
- if (!value) {
- break;
- }
- }
- if ($(this).attr("type") === "checkbox" || $(this).attr("type") === "radio") {
- $(this).attr('checked', Boolean(value));
- } else {
- if (value) {
- $(this).val(value);
- } else {
- $(this).val("");
- }
- }
- })
- }
呵呵, 值附上去了.
三. 总结:
上面只是提供了解决方案, 虽然前台系统, 不会考虑像后台 backend 系统那样,用 react,angularjs 这种 MVVM 框架, 虽然只是用了一个 Jquery 而已。不过我们还是可以通过一些方法来简化项目代码的。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0707/329844.html