<!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. 002_89C52_Proteus_DAC0832_输出50HZ,正弦波，三角波，矩形波，锯齿波

    (一)非常感谢:89C51与ad0832 输出正弦波,三角波,矩形波,锯齿波 (二)在上面的情况下进行程序的修改,实现50HZ的输出 (三)电路图 (三)输出方波 (四)输出锯齿波 (五)输出三角波 ...

  2. 011_Linux驱动之_s3c2410_gpio_getpin

    1. 功能:获取引脚状态 2. 函数原型: unsigned int s3c2410_gpio_getpin(unsigned int pin) { void __iomem *base = S3C2 ...

  3. The 10th Shandong Provincial Collegiate Programming Contest

    目录 Contest Info Solutions A. Calandar B. Flipping Game C. Wandering Robot D. Game on a Graph E. BaoB ...

  4. web软件测试基础系统测试简化理论

    系统测试点主要如下 1.系统测试基础-2.测试对象与测试级别-3.系统测试类型-4.系统测试方法-5.系统测试之软件测试质量. 1.系统测试:是尽可能彻底地检查出程序中的错误,提高软件系统的可靠性. ...

  5. scrapy框架之进阶

    五大核心组件 - 引擎(Scrapy) 用来处理整个系统的数据流处理, 触发事务(框架核心) - 调度器(Scheduler) 用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. ...

  6. Ubuntu 14.04 tar 打包系统安装到新机器

    制作Ubuntu14.04 的u启动盘,重启电脑进入要克隆的系统,打包整个根目录 su cd / tar -cvpzf /media/cdrom/backup.tar.gz / --exclude=/ ...

  7. 用docker 下载NGINX nginx安装错误:No package nginx available

    docker 内安装 nginx,提示 解决方案: 1,备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.rep ...

  8. POJ 3342 Party at Hali-Bula ——（树型DP）

    一开始用pii保存dp类型,写的很长,还是WA了= =.. 然后参考了一下别人的博客,重新写了一发(似乎是岐哥的博客233). 代码如下: #include <stdio.h> #incl ...

  9. oracle自定义排序和NULL值排序

    1.自定义顺序 当我们希望将某个查询结果指定的显示顺序展示的时候 order by case when column1=1 then 0 case when column1=1 then 1 else ...

  10. Linux 文件存在程序找不到文件

    1. 编码格式 程序运行时的编码格式和传输到程序中参数的编码格式是否一致,可以在程序中打印日志进行验证: 2. 转义符 文件路径中存在转义符 3. 运行程序的用户身份 不同用户运行程序也可能导致编码格 ...