jQuery序列化form表单数据为JSON对象的实现方法


Posted in jQuery onSeptember 20, 2018

 jquery提供的serialize方法能够实现。

$("#searchForm").serialize();

但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象)。

方法如下:

(function(window, $) {
  $.fn.serializeJson = function() {
    var serializeObj = {};
    var array = this.serializeArray();
    var str = this.serialize();
    $(array).each(
        function() {
          if (serializeObj[this.name]) {
            if ($.isArray(serializeObj[this.name])) {
              serializeObj[this.name].push(this.value);
            } else {
              serializeObj[this.name] = [
                  serializeObj[this.name], this.value ];
            }
          } else {
            serializeObj[this.name] = this.value;
          }
        });
    return serializeObj;
  };
})(window, jQuery);

调用:

console.info($("#searchForm").serializeJson());

下面通过一段代码看下jQuery序列化表单为JSON对象

<form id="myform"> 
  <table> 
    <tr> 
      <td>姓名:</td> 
      <td> <input type="text" name="name" /> </td> 
    </tr> 
    <tr> 
      <td>性别:</td> 
      <td> 
        <input type="radio" name="sex" value="1"> 男 
        <input type="radio" name="sex" value="0"> 女 
      </td> 
    </tr> 
    <tr> 
      <td>年龄:</td> 
      <td> 
        <select name="age"> 
          <option value="20">20</option> 
          <option value="21">21</option> 
          <option value="22">22</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td>爱好</td> 
      <td> 
        <input type="checkbox" value="basketball" name="hobby">篮球 
        <input type="checkbox" value="volleyball" name="hobby">排球 
        <input type="checkbox" value="football" name="hobby">足球 
        <input type="checkbox" value="earth" name="hobby">地球 
      </td> 
    </tr> 
    <tr> 
      <td colspan="2"> 
        <input type="button" id="ajaxBtn" value="提交" /> 
      </td> 
    </tr> 
  </table> 
</form> 
 
<script type="text/javascript"> 
  $(function() { 
    $("#ajaxBtn").click(function() { 
        var params = $("#myform").serializeObject(); //将表单序列化为JSON对象  
        console.info(params); 
      }) 
  }) 
  $.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
      if (o[this.name]) { 
        if (!o[this.name].push) { 
          o[this.name] = [ o[this.name] ]; 
        } 
        o[this.name].push(this.value || ''); 
      } else { 
        o[this.name] = this.value || ''; 
      } 
    }); 
    return o; 
  } 
</script>

上述serializeObject方法是将form序列化为JSON对象

总结

以上所述是小编给大家介绍的jQuery序列化form表单数据为JSON对象的实现方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery pjax 应用简单示例
Sep 20 #jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
jQuery使用each遍历循环的方法
Sep 19 #jQuery
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
You might like
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
CI框架附属类用法分析
2018/12/26 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python简单分割文件的方法
2015/07/30 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python -v 报错问题的解决方法
2020/09/15 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
总监职责范文
2013/11/09 职场文书
个人评价范文分享
2014/01/11 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
九年级语文教学反思
2016/03/03 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis