<!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. chrome扩展开发实战入门之二－自动搜索

    目标:产生随机数,用于百度搜索:像看电视一样观看搜索结果 参考上一篇,新建目录hellocrx,其中三个文件:manifest.json  content_script.js 和jquery-3.4. ...

  2. python 改变函数实参的值

    def change(n): n[] = 'Mr Gumby' names = ['Mrs Entity', 'Mrs. Thing'] change(names) print(names) resu ...

  3. tarjan缩点——在农场万圣节Trick or Treat on the Farm

    一个房间能到另一个房间,有向图,奶牛从自己编号(1到n)的点出发,如果回到以前到过的点就停止,问每头奶牛可以经过几个点: 情况分两种, 一,奶牛在环上,能走的是环的大小,二,一条链连接一个环,大小是链 ...

  4. while 循环 continue break 用法例子

    py2 temp = "理解" # utf- 8 #解码, 需要指定原来的是什么编码 temp_unicode = temp.decode("utf-8") # ...

  5. jira默认是jira_user用户组的用户有登录jira的权限

    场景描述: 今天给jira新建了几个用户组,看着英文的jira_user和jira_developer有点多余,所以就给删掉了.然后后面新建了开发人员和测试人员用户组,进行了人员分配和项目分配,可是突 ...

  6. include指令与jsp:include动作标识的区别

    include指令: 文件包含指令include是jsp的另一条指令标识.通过该指令可以在一个jsp页面中包含另一个jsp页面.不过该指令是静态包含,也就是说被包含文件中所有内容会被原样包含到jsp页 ...

  7. DockerFile体系结构（保留字指令）

    1.FROM --基础镜像,当前新镜像是基于那个镜像的 2.MAINTAINER --镜像维护者的姓名和邮箱地址 3.RUN --容器构建时需要运行的指令 4.EXPOSE --当前容器对外暴露出的端 ...

  8. DQL：查询表中数据

    1. 基础查询 (1) 查询整表 SELECT * FROM 表名; -- 不推荐使用"*",不方便阅读 (2) 选择性查询 SELECT 列名,列名,列名 FROM 表名; (3 ...

  9. 在Vue文件中引用模块的相对路径“@“符号表示什么意思？

    @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免书写麻烦又易错的相对路径. import model from "@/common/model"; // 默认路 ...

  10. appStore上传苹果应用程序软件发布

    首先确定帐号是否能发布, https://developer.apple.com/account,如果你打开Provisioning Portal,然后点击DisTribution(1)图中加号是灰色 ...