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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python将数组n等分的实例
2019/12/02 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js