<!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. Gym - 102307D Do Not Try This Problem

     Do Not Try This Problem Gym - 102307D 题意:给个长度为len的字符串(len<=1e5),然后q次操作(q<=1e5),每次给出i,a,k,c,(i ...

  2. [BJWC2008]王之财宝

    嘟嘟嘟 如果没有限制,而且必须选\(m\)件的话,就是隔板法\(C_{n + m - 1} ^ {m - 1}\)了.现在要选至多\(m\)件,那么就相当于新增一个板儿,分出的新的盒子表示" ...

  3. 基于ARM的SoC设计入门[转]

    原文:基于ARM的SoC设计入门 我们跳过所有对ARM介绍性的描述,直接进入工程师们最关心的问题.要设计一个基于ARM的SoC,我们首先要了解一个基于ARM的SoC的结构.图1是一个典型的SoC的结构 ...

  4. Til the Cows Come Home （ POJ 2387） （简单最短路 Dijkstra）

    problem Bessie is out in the field and wants to get back to the barn to get as much sleep as possibl ...

  5. Linux设备驱动程序 之 kmalloc

    原型 kmalloc的原型如下: void *kmalloc(size_t size, gfp_t flags) 第一个参数是要分配的块的大小,第二个参数是分片标志: flags标志 最常用的标志是G ...

  6. arcgis python 随机取部分数据

    # -*- coding: cp936 -*- import arcpy import os import ylpy import random def main(): num=ylpy.getCou ...

  7. SQL-W3School-基础：SQL DISTINCT 语句

    ylbtech-SQL-W3School-基础:SQL DISTINCT 语句 1.返回顶部 1. 本章讲解 SELECT DISTINCT 语句. SQL SELECT DISTINCT 语句 在表 ...

  8. SQL-W3School-基础：SQL SELECT 语句

    ylbtech-SQL-W3School-基础:SQL SELECT 语句 1.返回顶部 1. 本章讲解 SELECT 和 SELECT * 语句. SQL SELECT 语句 SELECT 语句用于 ...

  9. python中的cls到底指的是什么

    python中的cls到底指的是什么,与self有什么区别? 2018年07月31日 11:13:09 rs勿忘初心 阅读数:7769   作者:秦风链接:https://www.zhihu.com/ ...

  10. OOM异常的发生原因

    一,jvm内存区域 1,程序计数器 一块很小的内存空间,作用是当前线程所执行的字节码的行号指示器. 2,java栈 与程序计数器一样,java栈(虚拟机栈)也是线程私有的,其生命周期与线程相同.通常存 ...