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. XSS-存储型

    @实操视频https://www.bilibili.com/video/av26679456?from=search&seid=13377211289924067562 存储型的注入对象不是搜 ...

  2. 暴力破解-DVWA_1.9-笔记

     穷举法  通过社工尽可能的缩小密码字典的范围   所用到的工具: Firefox浏览器及其插件Proxy Switcher, OWASP ZAP代理抓包工具. OWASP ZAP  代理抓包工具 h ...

  3. 小记---------网页采集之selenium

    1.元素定位 ID定位元素:  findElement(By.id(“”));  通过元素的名称定位元素:  findElement(By.name(“”));   通过元素的html中的位置定位元素 ...

  4. <<C++ Primer>> 第三章 字符串, 向量和数组 术语表

    术语表 第 3 章 字符串, 向量和数组 begin: 是 string 和 vector 的成员,返回指向第一个元素的迭代器.也是一个标准库函数,输入一个数字,返回指向该数字首元素的指针.    缓 ...

  5. Git_命令初解

  6. PythonDay13

    第十三章 今日内容 匿名函数 内置函数二 闭包 匿名函数 匿名函数就是一行函数,关键字是lambda lambda x:x# lambda 参数:返回值x 是普通函数的形参 可以不定义形参:x 是 普 ...

  7. Python：什么是进阶，如何进阶？

    目录 Python:什么是进阶,如何进阶? 1. 什么是进阶? 2. 如何进阶? 3. 除此之外呢? Python:什么是进阶,如何进阶? 1. 什么是进阶? 一门编程语言的基础部分,往往非常简单.如 ...

  8. numpy-查找操作大全

    本文记录日常工作中遇到的查找操作,持续更新. 注意:输入必须是 数组,不能是 list 极值 min,max 返回极值 argmin(a, axis=None, out=None), 返回极值所在的位 ...

  9. day 01 常量 注释 int(整型) 用户交互input 流程控制语句if

    python的编程语言分类(重点) if 3 > 2: 编译型: 将代码一次性全部编译成二进制,然后再执行. 优点:执行效率高. 缺点:开发效率低,不能跨平台. 代表语言:C 解释型: 逐行解释 ...

  10. 解决Response.AddHeader中文乱码问题

    string filename = HttpUtility.UrlEncode(Encoding.UTF8.GetBytes("培训班自然情况表")); Response.AddH ...