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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Jquery实现获取子元素的方法分析
Aug 24 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
PHP三元运算的2种写法代码实例
2014/05/12 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
jquery 指南/入门基础
2007/11/30 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
劳资专员岗位职责
2013/12/27 职场文书
名人演讲稿范文
2014/09/16 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
SQL写法--行行比较
2021/08/23 SQL Server
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技