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. 手写朴素贝叶斯（naive_bayes）分类算法

    朴素贝叶斯假设各属性间相互独立,直接从已有样本中计算各种概率,以贝叶斯方程推导出预测样本的分类. 为了处理预测时样本的(类别,属性值)对未在训练样本出现,从而导致概率为0的情况,使用拉普拉斯修正(假设 ...

  2. finreport 截图时间的函数

  3. 反复横跳的瞄准线！从向量计算说起！基于射线检测的实现！Cocos Creator!

    最近有小伙伴问我瞄准线遇到各种形状该怎么处理?如何实现反复横跳的瞄准线?最近刚好在<Cocos Creator游戏开发实战>中看到物理系统有一个射线检测,于是,基于这个射线检测,写了一个反 ...

  4. Leetcode 35.搜索插入位置 By Python

    给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6], 5 输 ...

  5. （5.2.2）配置服务器参数——dbcc跟踪标记(trace)

    关键字:跟踪标记,跟踪 [1]常规dbcc命令 dbcc help('?') --查看dbcc 所有命令,常规下只有32个常用的dbcc TRACEON(2588) --指定了2588标记的话,你就可 ...

  6. Excel透视表基础之数据源、创建、基本术语、基本操作

    数据源的基本要求: 每列数据的第一行包含该列标题 不能包含空行或空列 不能包含空单元格 不能包含合并单元格 不能包含同类字段 如果包含空行.空列则删除空行和空列.如果包含空单元格则填充空单元格. 如果 ...

  7. 11.AutoMapper 之值转换器(Value Transformers)

    https://www.jianshu.com/p/b77311546e64 值转换器(Value Transformers) 值转换器应用于单一类型的转换.AutoMapper在分配值之前,会检测该 ...

  8. Linux运维必会的100道MySql面试题之（一）

    01 如何启动MySql服务 /etc/init.d/mysqld start service mysqld start Centos 7.x 系统 sysctl  start mysqld 02 检 ...

  9. 查询GC日志、动态年龄计算

    https://www.cnblogs.com/onmyway20xx/p/6590603.html 从实际案例聊聊Java应用的GC优化 动态年龄计算 关于上文中提到晋升年龄阈值为2,很多同学有疑问 ...

  10. Linux操作系统笔记

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> //linux下面的头文件 #include ...