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手风琴的简单制作
May 12 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php socket通信简单实现
2016/11/18 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
护士进修自我鉴定
2014/02/07 职场文书
先进单位申报材料
2014/12/25 职场文书
小学家长意见怎么写
2015/06/03 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android