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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python实现基本进制转换的方法
2015/07/11 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python async with和async for的使用
2019/06/20 Python
python SocketServer源码深入解读
2019/09/17 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
护士实习自我鉴定
2013/10/22 职场文书
2013年高中生自我评价
2013/10/23 职场文书
安全检查管理制度
2014/02/02 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
廉洁自律个人总结
2015/02/14 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android