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. 【神经网络与深度学习】Caffe训练执行时爆出的Check failed: registry.count(t ype) == 1 (0 vs. 1) Unknown layer type

    自己建立一个工程,希望调用libcaffe.lib ,各种配置好,也能成功编译,但是运行就会遇到报错 F0519 14:54:12.494139 14504 layer_factory.hpp:77] ...

  2. selenium—用NoSuchElementException异常判断页面元素是否存在

    一.知识补充 1.find_element的一种使用方法: find_element(by=方法,value=值) 例如: find_element(by="id",value=& ...

  3. HDU 4585 Shaolin （STL map）

    Shaolin Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Sub ...

  4. 使用注解方式搭建SpringMVC

    1.以前搭建Spring MVC 框架一般都使用配置文件的方式进行,相对比较繁琐.spring 提供了使用注解方式搭建Spring MVC 框架的方式,方便简洁.使用Spring IOC 作为根容器管 ...

  5. Spring Security框架进阶、自定义登录

      1.Spring Security框架进阶 1.1 Spring Security简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安 ...

  6. git部分命令笔记

    目录 配置user信息 建Git仓库 清空暂存区 git变更文件名 查看暂存区状态 查看历史 查看本地分支 查看所有分支(包含远程) 创建分支 基于远程分支创建本地新分支 查看图形化分支日志 图形化界 ...

  7. J2EE WEB应用架构分析

    1. 架构概述 J2EE体系包括java server pages(JSP) ,java SERVLET, enterprise bean,WEB service等技术.这些技术的出现给电子商务时代的 ...

  8. 2019-11-29-git-需要知道的1000个问题

    title author date CreateTime categories git 需要知道的1000个问题 lindexi 2019-11-29 8:36:7 +0800 2018-2-13 1 ...

  9. 利用logrotate切割nginx的access.log日志

    一.新建一个nginx的logrotate配置文件 /var/log/nginx/access.log { daily rotate compress delaycompress missingok ...

  10. Big Data（八）MapReduce的搭建和初步使用

    ---恢复内容开始--- 回顾: 1.最终开发MR的计算程序 2.hadoop 2.x 出现了一个yarn:资源管理>>MR没有后台场服务 yarn模型:container 容器,里面会运 ...