jquery form表单获取内容以及绑定数据


Posted in Javascript onFebruary 24, 2016

在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单:

获取表单的数据:$("#formid").serializeJson();

绑定数据到表单:$("#formid").setForm(json);

jquery.formHelp.js插件

/**
 * 将form里面的内容序列化成json
 * 相同的checkbox用分号拼接起来
 * @param {dom} 指定的选择器
 * @param {obj} 需要拼接在后面的json对象
 * @method serializeJson
 * */
$.fn.serializeJson=function(otherString){
  var serializeObj={},
    array=this.serializeArray();
  $(array).each(function(){
    if(serializeObj[this.name]){
      serializeObj[this.name]+=';'+this.value;
    }else{
      serializeObj[this.name]=this.value;
    }
  });

  if(otherString!=undefined){
    var otherArray = otherString.split(';');
    $(otherArray).each(function(){
      var otherSplitArray = this.split(':');
      serializeObj[otherSplitArray[0]]=otherSplitArray[1];
    });
  }
  return serializeObj;
};

/**
 * 将josn对象赋值给form
 * @param {dom} 指定的选择器
 * @param {obj} 需要给form赋值的json对象
 * @method serializeJson
 * */
$.fn.setForm = function(jsonValue){
  var obj = this;
  $.each(jsonValue,function(name,ival){
    var $oinput = obj.find("input[name="+name+"]");
    if($oinput.attr("type")=="checkbox"){
      if(ival !== null){
        var checkboxObj = $("[name="+name+"]");
        var checkArray = ival.split(";");
        for(var i=0;i<checkboxObj.length;i++){
          for(var j=0;j<checkArray.length;j++){
            if(checkboxObj[i].value == checkArray[j]){
              checkboxObj[i].click();
            }
          }
        }
      }
    }
    else if($oinput.attr("type")=="radio"){
      $oinput.each(function(){
        var radioObj = $("[name="+name+"]");
        for(var i=0;i<radioObj.length;i++){
          if(radioObj[i].value == ival){
            radioObj[i].click();
          }
        }
      });
    }
    else if($oinput.attr("type")=="textarea"){
      obj.find("[name="+name+"]").html(ival);
    }
    else{
      obj.find("[name="+name+"]").val(ival);
    }
  })
}

html测试代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQueryFormHelp练习</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <script src="jquery.formHelp.js"></script>
  <script type="text/javascript">

  $(function () {
    $("#form").setForm({a: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});
  });
  function submitForm(){
    console.log($("#form").serializeJson('id:12;name:13;'));
  }
</script>
</head>

<body>
<form id="form">
  <div><input type="text" name="a" /></div>
  <div><input type="text" name="b" id="b" /></div>
  <div><input type="hidden" name="c" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40"></textarea>
    <input type="checkbox" name="f" value="10"/>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" />
    <input type="checkbox" name="f" value="9"/>
  </div>
  <div>
    <input name="i" type="radio" value="王" />王
    <input name="i" type="radio" value="小" />小
  </div>
  <div>
    <input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>
  </div>
</form>


</body>
</html>

以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
javascript cookie的简单应用
Feb 24 #Javascript
javascript的正则匹配方法学习
Feb 24 #Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 #Javascript
JavaScript设计模式经典之命令模式
Feb 24 #Javascript
JavaScript设计模式经典之工厂模式
Feb 24 #Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 #Javascript
JavaScript的设计模式经典之代理模式
Feb 24 #Javascript
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
介绍Python中的__future__模块
2015/04/27 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
教育孩子心得体会
2014/01/01 职场文书
2014年学校工作总结
2014/11/20 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
关于的python五子棋的算法
2022/05/02 Python