<!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对象功能示例的更多相关文章

  1. jquery将form表单序列化常json

    var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;} ...

  2. 拓展jQuery的serialize()，将form表单转化为json对象

    jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...

  3. jQuery form表单序列化为JSON对象！

    /* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...

  4. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架（三）—数据控件 设计模式之简单工厂模式（C#语言描述）

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  5. Jquery如何序列化form表单数据为JSON对象

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  6. 序列化form表单内容为json对象

    SourceCode: ; (function ($) { $.fn.extend({ serializeJson: function () { var json = {}; $(this.seria ...

  7. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  8. jQuery将form表单的数据封装成json对象

    /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...

  9. Jquery表单序列化和json操作

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Jest自动化测试

    最近一直很苦恼,测试这一块的内容,一直想提升测试效率,从慕课网了解到了自动化测试jest ,准备试下下,记录一下学习笔记,方便别人使用 1 什么是 Jest? Jest是 Facebook 的一套开源 ...

  2. change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。

    change([[data],fn]) 概述 当元素的值发生改变时,会发生 change 事件.大理石平台价格表 该事件仅适用于文本域(text field),以及 textarea 和 select ...

  3. 洛谷P1903 [国家集训队]数颜色 / 维护队列 （ 带 修 ）

    题意:有两种操作: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P Col 把第P支画笔替换为颜色Col. 对每个1操作 输出答案: 带修莫队 模板题 (加 ...

  4. uname/hostname

    uname 显示操作系统相关信息的命令. hostname 显示或者设置当前系统的主机名 修改hostname

  5. 1-7HSB色彩模式

    http://www.missyuan.com/thread-350721-1-1.html HSB色彩模式色相hue.饱和度saturation.明度brightness 在HSB模式中,S和B的取 ...

  6. UVALive 3716 DNA Regions ——（式子变形）

    一开始直接想到了二分,写了一发然后过了全部样例就交了,果断WA.因为这个问题显然是不满足单调性的. 然后想之前刚做的斜率优化DP,但是那个是求斜率最大值,不是求满足斜率大于一定值的最大长度的.也构造不 ...

  7. pwn学习日记Day18 《程序员的自我修养》读书笔记

    知识杂项 obj文件:当前源代码编译成二进制目标文件 exe文件:将.obj文件与库文件.lib等文件链接生成的可执行文件 一个现代编译器的主要工作流程如下: 源程序(source code)→ 预处 ...

  8. 检测系统中进程占满单个cpu的情况

    #!/bin/bash function thread_used_cpu(){ # $1 为单个cpu负载的百分比 if [[ $1 == "" ]];then full_load ...

  9. go协程理解

    一.Golang 线程和协程的区别 备注:需要区分进程.线程(内核级线程).协程(用户级线程)三个概念. 进程.线程 和 协程 之间概念的区别 对于 进程.线程,都是有内核进行调度,有 CPU 时间片 ...

  10. 十个Python爬虫武器库示例，十个爬虫框架，十种实现爬虫的方法！

    一般比价小型的爬虫需求,我是直接使用requests库 + bs4就解决了,再麻烦点就使用selenium解决js的异步 加载问题.相对比较大型的需求才使用框架,主要是便于管理以及扩展等. 1.Scr ...