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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现简单飞机大战
Jul 05 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
十大“创意”战术!
2020/03/04 星际争霸
php 三维饼图的实现代码
2008/09/28 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python将unicode转为str的方法
2017/06/21 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python多维数组分位数的求取方式
2020/03/03 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
大学生简历的个人自我评价
2013/12/04 职场文书
高中军训感言200字
2014/02/23 职场文书
硕士生找工作求职信
2014/07/05 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
JS实现扫雷项目总结
2021/05/19 Javascript
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server