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 replace方法去空格
May 08 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery中实现text()的方法
Apr 04 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
新闻内页-JS分页
2006/06/07 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python itertools模块详解
2015/05/09 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Django web框架使用url path name详解
2019/04/29 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
品恩科技软件测试面试题
2014/10/26 面试题
《蓝色的树叶》教学反思
2014/02/24 职场文书
悬空寺导游词
2015/02/05 职场文书
红白喜事主持词
2015/07/06 职场文书
初中班长竞选稿
2015/11/20 职场文书