利用JS轻松实现获取表单数据


Posted in Javascript onDecember 06, 2016

接触过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 下面来看看上面输出的结果,哈哈值取到了。

利用JS轻松实现获取表单数据

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>

利用JS轻松实现获取表单数据

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("");
      }
    }
  })
}

 利用JS轻松实现获取表单数据

呵呵,值附上去了.

     三. 总结:

    上面只是提供了解决方案, 虽然前台系统,不会考虑像后台backend 系统那样,用react,angularjs这种MVVM框架, 虽然只是用了一个Jquery而已。不过我们还是可以通过一些方法来简化项目代码的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
jQuery实现删除li节点的方法
Dec 06 #Javascript
详解springmvc 接收json对象的两种方式
Dec 06 #Javascript
You might like
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
八大排序算法的Python实现
2021/01/28 Python
Python编写Windows Service服务程序
2018/01/04 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
pytorch实现查看当前学习率
2020/06/24 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
财务助理岗位职责
2013/11/10 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
入股协议书
2014/04/14 职场文书
七一讲话心得体会
2014/09/05 职场文书
学生保证书格式
2015/02/27 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
优质护理服务心得体会
2016/01/22 职场文书
golang中的空slice案例
2021/04/27 Golang
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Python中time标准库的使用教程
2022/04/13 Python