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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
JS关于刷新页面的相关总结
2018/05/09 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python try 异常处理(史上最全)
2019/03/07 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
实习求职信
2013/12/01 职场文书
给面试官的感谢信
2014/02/01 职场文书
小学语文国培感言
2014/03/04 职场文书
教师师德承诺书
2014/03/26 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书