脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jquery form表单获取内容以及绑定数据

jquery form表单获取内容以及绑定数据

 更新时间：2016年02月24日 15:05:52   作者：CangoWu  
这篇文章主要介绍了jquery form表单获取内容以及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>

以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • Bootstrap table表格简单操作

    Bootstrap table表格简单操作

    这篇文章主要为大家详细介绍了Bootstrap table表格简单操作的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 使用mpvue搭建一个初始小程序及项目配置方法

    使用mpvue搭建一个初始小程序及项目配置方法

    这篇文章主要介绍了使用mpvue搭建一个初始小程序及项目配置方法,需要的朋友可以参考下
    2018-12-12
  • 一文弄懂JavaScript的继承方式

    一文弄懂JavaScript的继承方式

    这篇文章主要介绍了一文弄懂JavaScript的继承方式,在java面试过程中经常被问到javascript中有几种继承方式，每种继承方式是怎么实现的，文中给大家讲解的非常详细，需要的朋友可以参考下
    2022-05-05
  • 基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • javascript currentTarget对象介绍

    javascript currentTarget对象介绍

    javascript currentTarget对象介绍...
    2007-10-10
  • 防止重复发送 Ajax 请求

    防止重复发送 Ajax 请求

    本文主要介绍防止重复发送 Ajax请求的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 下雪了 javascript实现雪花飞舞

    下雪了 javascript实现雪花飞舞

    下雪了，这篇文章主要介绍了javascript实现雪花飞舞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 基于Bootstrap实现tab标签切换效果

    基于Bootstrap实现tab标签切换效果

    这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • javascript中的缓动效果实现程序

    javascript中的缓动效果实现程序

    javascript中的缓动效果可以应用于很多地方，比如距离位移上的变化：图片的滚动、焦点图的轮转切换，透明度上的变化：渐隐渐现。凡是存在运动的状态都适用，下面以最基本的块在容器内从左到右滑动为例，讲下几种不同的缓动处理方式
    2012-12-12
  • JavaScript 中的 this 简单规则

    JavaScript 中的 this 简单规则

    想要确定this里规则是什么，其实方法很简单，通过检查它的调用位置，在函数被调用的时候确定this，下面就跟随脚本之家小编一起通过本文学习吧
    2017-09-09

最新评论