jQuery实现获取form表单内容及绑定数据到form表单操作分析


Posted in jQuery onJuly 03, 2018

本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作。分享给大家供大家参考,具体如下:

在日常开发的过程中,难免会用到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>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

jQuery实现获取form表单内容及绑定数据到form表单操作分析

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
You might like
论坛头像随机变换代码
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
python数组过滤实现方法
2015/07/27 Python
python flask 多对多表查询功能
2017/06/25 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python列表推导式入门学习解析
2019/12/02 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
一道SQL面试题
2012/12/31 面试题
某公司.Net方向面试题
2014/04/24 面试题
物业客服专员岗位职责
2013/11/30 职场文书
函授生自我鉴定
2014/03/25 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android