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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现增删改查
Dec 22 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
PHP Token(令牌)设计
2008/03/15 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python 实现绘制整齐的表格
2019/11/18 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
初中生学习的自我评价
2013/11/14 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
图书室标语
2014/06/21 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
pycharm无法安装cv2模块问题
2022/05/20 Python