脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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表单的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript实现楼梯滚动特效(jQuery实现)

    JavaScript实现楼梯滚动特效(jQuery实现)

    这篇文章主要为大家详细介绍了JavaScript实现楼梯滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript实现的简单Tab点击切换功能示例

    JavaScript实现的简单Tab点击切换功能示例

    这篇文章主要介绍了JavaScript实现的简单Tab点击切换功能,涉及JavaScript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • JS中FormData类实现文件上传

    JS中FormData类实现文件上传

    这篇文章主要为大家详细介绍了JS中FormData类实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 微信小程序ibeacon三点定位详解

    微信小程序ibeacon三点定位详解

    这篇文章主要为大家详细介绍了微信小程序ibeacon三点定位的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • js展开闭合效果演示代码

    js展开闭合效果演示代码

    本文为大家介绍下js如何实现展开闭合效果，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • TypeScript中类的基础概念和使用详解

    TypeScript中类的基础概念和使用详解

    这篇文章主要为大家详细介绍了TypeScript 中类的概念和用法，文中的示例代码讲解详细，希望能帮助大家更好地理解和运用 TypeScript 中的类
    2023-06-06
  • js实现无感刷新的实践(附前后端实现)

    js实现无感刷新的实践(附前后端实现)

    无感刷新机制的目的是在用户不知情的情况下,自动更新其认证令牌本文,主要介绍了js实现无感刷新的实践(附前后端实现),具有一定的参考价值,感兴趣的可以了解一下
    2024-04-04
  • Bootstrap响应式侧边栏改进版

    Bootstrap响应式侧边栏改进版

    这篇文章主要为大家详细介绍了Bootstrap响应式侧边栏改进版，结合导航条和下拉菜单进行改进,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 原生js实现点击按钮复制内容到剪切板

    原生js实现点击按钮复制内容到剪切板

    这篇文章主要为大家详细介绍了原生js实现点击按钮复制内容到剪切板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS子父窗口互相操作取值赋值的方法介绍

    JS子父窗口互相操作取值赋值的方法介绍

    JS子父窗口互相操作取值赋值的方法介绍，需要的朋友可以参考一下
    2013-05-05

最新评论