jQuery实现form表单序列化转换为json对象功能示例


Posted in jQuery onMay 23, 2018

本文实例讲述了jQuery实现form表单序列化转换为json对象功能。分享给大家供大家参考,具体如下:

做web前端开发时,需要ajax提交大量表单数据,如果一个个form字段拼接很费劲也容易出错,下面方法可解决这个问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery form序列化转换为json对象</title>
    <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    </script>
  </head>
  <body>
    <form action="" name="post_form" id="post_form">
      姓名:<input type="name" name="name" value="王">
      <br/>性别:<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
      <br/>爱好:<input type="checkbox" name="loves" value="篮球" >篮球<input type="checkbox" name="loves" value="足球">足球
      <br/>籍贯:<select name="province">
              <option value="上海">上海</option>
              <option value="北京">北京</option>
              <option value="深圳">深圳</option>
            </select>
    </form>
    <div id="result" style="margin-top:20px;width:600px;height:100px;border:1px solid #f00;">
    </div>
    <div>
    <button id="send">发送</button>
    </div>
    <script>
    //jquery form序列化转换为json对象
    (function($){
      $.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;
      };
    })(jQuery);
    $(document).ready(function(){
      $("#send").click(function(){
        var post_data=$("#post_form").serializeJson();//表单序列化
        $("#result").html(JSON.stringify(post_data));
      })
    })
    </script>
  </body>
</html>

运行效果如下图所示:

jQuery实现form表单序列化转换为json对象功能示例

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
jQuery获取随机颜色的实例代码
May 21 #jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
You might like
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python 异常处理的实例详解
2017/09/11 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
详解Python文件修改的两种方式
2019/08/22 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
校园活动宣传方案
2014/03/28 职场文书
财务部会计岗位职责
2015/02/03 职场文书
八一建军节慰问信
2015/02/14 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
JS中如何优雅的使用async await详解
2021/10/05 Javascript
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android