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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现计算器功能
Oct 19 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程序
2006/10/09 PHP
PHP PDO函数库详解
2010/04/27 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php文件上传类的分享
2017/07/06 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python pymongo模块用法示例
2018/03/31 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python制作动态字符图的实例
2019/01/27 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
元旦获奖感言
2014/03/08 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
销售开票员岗位职责
2015/04/15 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python