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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php异常处理使用示例
2014/02/25 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python实现Const详解
2015/01/27 Python
Python字符串处理实现单词反转
2017/06/14 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
汽车驾驶求职信
2013/10/25 职场文书
会计专业应届生求职信
2013/11/24 职场文书
思想汇报格式
2014/01/05 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
春风化雨观后感
2015/06/11 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL