利用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 相关文章推荐
广告显示判断
Aug 31 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
vue+element-ui+axios实现图片上传
Aug 20 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
简单JS代码压缩器
2006/10/12 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python 异常处理实例详解
2014/03/12 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
合作投资意向书
2014/04/01 职场文书
施工员岗位职责范本
2015/04/11 职场文书
使用JS实现简易计算器
2021/06/14 Javascript