1、jquery扩展方法（表单数据格式化为json对象）

<script type="text/javascript">

// 将表单数据序列化为一个json对象，例如 {"name":"zs", "age":10}

// 使用：var jsonObj = $("#formId").serializeObject();

$.fn.serializeObject = function()

{

   var o = {};

   var a = this.serializeArray();

   $.each(a, function() {

       if (o[this.name]) {

           if (!o[this.name].push) {

               o[this.name] = [o[this.name]];

           }

           o[this.name].push(this.value || '');

       } else {

           o[this.name] = this.value || '';

       }

   });

   return o;

};

</script>

2、jquery的表单序列化方法

　　（1）$("#formId").serialize(): 将所有表单选中项拼接成形如"username=zs&password=123"的字符串

　　（2）$("#formId").serializeArray(): 将表单所有选中项拼成json数组，格式为：

　　　　[{name: "username", value: "zs"},{name: "password", value: "123"}]

　　（3）$.param(jsonObj): 将json对象转换成形如"username=zs&password=123"的字符串

3、案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>

<body>

    <h2>a页面</h2>

    <form id="form">

        <input type="text" name="username"/>

        <input type="text" name="password"/>

        <input type="button" value="submit" onclick="formSubmit()"/>

    </form>

</body>

<script type="text/javascript">

    function formSubmit() {

        var str = $("#form").serialize();

        console.log(str);

        var jsonArray = $("#form").serializeArray();

        console.log(jsonArray);

        console.log(jsonArray[0].name);

        console.log(jsonArray[0].value);

        console.log(jsonArray[1].name);

        console.log(jsonArray[1].value);

        var jsonObj = $("#form").serializeObject();

        console.log(jsonObj);

        console.log(jsonObj.username + "---" + jsonObj.password);

　　　　 var str = $.param(jsonObj);
        console.log(str);

    }

</script>

<script type="text/javascript">

    // 将表单数据序列化为一个json对象，例如 {"name":"zs", "age":10}

    // 使用：var jsonObj = $("#formId").serializeObject();

    $.fn.serializeObject = function()

    {

       var o = {};

       var a = this.serializeArray();

       $.each(a, function() {

           if (o[this.name]) {

               if (!o[this.name].push) {

                   o[this.name] = [o[this.name]];

               }

               o[this.name].push(this.value || '');

           } else {

               o[this.name] = this.value || '';

           }

       });

       return o;

    };

</script>

</html>

　　结果：

　　

jquery扩展方法（表单数据格式化为json对象）的更多相关文章

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

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

  2. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  3. 023-将表单序列化为json对象

    使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法.this指的就是谁调用了这个方法. $.fn.se ...

  4. 将表单序列化为JSON对象

    将表单序列化为JSON对象的工具方法: $(function() { //工具方法,可以将指定的表单中的输入项目序列化为JSON数据 $.fn.serializeJson = function() { ...

  5. Jquery 将表单序列化为Json对象

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...

  6. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  8. js 表单序列化为json对象

    $.fn.serializeJson = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () ...

  9. From 表单序列化为json对象（代码片段）

    $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...

随机推荐

  1. 《Python编程从0到1》笔记5——图解递归你肯定看完就能懂！

    本小节的示例比较简单,因为在每次递归过程中原问题仅缩减为单个更小的问题.这样的问题往往能够用简单循环解决.这类递归算法的函数调用图是链状结构.这种递归类型被称为“单重递归”(single recurs ...

  2. JAVA 编程思想一

    1: 动态绑定和静态绑定 使用private或static或final修饰的变量或者方法,使用静态绑定.而虚方法(可以被子类重写的方法)则会根据运行时的对象进行动态绑定: 静态绑定使用类信息来完成,而 ...

  3. 深度解析Maven

    此文来源于: https://www.cnblogs.com/hafiz/p/8119964.html 带你深度解析Maven   一.What`s Maven? Maven是基于项目对象模型(POM ...

  4. linux c++ 实现http请求

    main.cpp #include HttpReq.h #include <string.h> int main(void) { HttpRequest* Http; char http_ ...

  5. 红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置

    目录 OpenLDAP 服务端与客户端配置 关于LDIF 一个LDIF基本结构一个条目 属性 Object的类型 服务端 安装 生成证书 生成默认数据 修改基本的配置 导入基础数据 关于ldif的格式 ...

  6. mysql中char，varchar与text类型的区别

      关于char,varchar与text平时没有太在意,一般来说,可能现在大家都是用varchar.但是当要存储的内容比较大时,究竟是选择varchar还是text呢?不知道...... text  ...

  7. 10分钟学会RabbitMQ安装部署

    一.单机版的 RabbitMQ 的安装部署 1.安装 Erlang 环境 wget http://erlang.org/download/otp_src_19.3.tar.gz tar -zxvf o ...

  8. C中的异常处理

    1,C 语言崇尚简洁高效,因此语言本身并没有异常处理的相关语法规则,但是异常处理在 C 语言中 是存在的,我们有必要从 C 语言开始先看一看 C 语言中的异常处理是怎样, 然后对比 C++ 里面的异常 ...

  9. isinstance与issubclass,反射

    目录 isinstance与issubclass isinstance issubclass 反射 定义 反射在模块中的应用 内置方法 isinstance与issubclass isinstance ...

  10. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...