<body>

        <form action="#" method="post" id="form1">

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

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

            <input type="checkbox" name="hobby" value="eat" checked="checked"/>

            <input type="checkbox" name="hobby" value="drink" checked="checked"/>

            <input type="checkbox" name="hobby" value="play" checked="checked"/>

        </form>

    </body>

    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        $.fn.extend({

            serializeJson:function(){

                var json={};

                var msg = this.serializeArray();

                $(msg).each(function(){

                    if(json[this.name]){//如果name已存在

                        if(!json[this.name].push){//能push代表是数组

                            //不是数组

                            json[this.name]=[json[this.name]];

                        }

                        json[this.name].push(this.value||"");//装入数组

                    }else{

                        json[this.name]=this.value||"";

                    }

                });

                return json;

            }

        });

        $(function(){

            var formData = $("#form1").serializeJson();

            console.info(formData);

        })

    </script>

将表单数据转换为json代码分享的更多相关文章

  1. 使用JQuery将前端form表单数据转换为JSON字符串传递到后台处理

    一般地,我们在处理表单(form表单哦)数据时,传输对象或字符串到后台,Spring MVC或SpringBoot的Controller接收时使用一个对象作为参数就可以被正常接收并封装到对象中.这种方 ...

  2. Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个

    (function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...

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

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

  4. PHP表单数据写入MySQL代码

    <h1>插入操作</h1> <?php if(!isset($_POST['submit'])){ //如果没有表单提交,显示一个表单 ?> <form ac ...

  5. form表单数据进行json转换

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

  6. JSON编码格式提交表单数据详解

    以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的 ...

  7. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  8. .net之工作流工程展示及代码分享（一）工作流表单

    Workflow表单的作用是能够在客户端进行表单设计,然后在流程中动态开放哪些输入框可以供用户填写. 在这里我扩展了一个常用的WebEditor工具——KindEditor,能够插入自定义的html符 ...

  9. C#中把Datatable转换为Json的5个代码实例

    一. /// <summary> /// Datatable转换为Json /// </summary> /// <param name="table" ...

随机推荐

  1. BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  2. SDOI2016 R1做题笔记

    SDOI2016 R1做题笔记 经过很久很久的时间,shzr终于做完了SDOI2016一轮的题目. 其实没想到竟然是2016年的题目先做完,因为14年的六个题很早就做了四个了,但是后两个有点开不动.. ...

  3. [AH2017/HNOI2017]影魔

    嘟嘟嘟 这题真的挺神的,我是真没想出来. 洛谷的第一篇题解说的非常妙,实在是佩服. 就是我们首先预处理出对于第\(i\)个数,在\(i\)左边比第一个比\(i\)大的数\(l_i\),在\(i\)右边 ...

  4. BAT美团滴滴java面试大纲（带答案版）之四：多线程Lock

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 这是多线程的第二篇. 多线程就像武学中对的吸星大法,理解透了用好了可以得道成仙,俯瞰芸 ...

  5. C# WebApi 获取客户端ip地址

    转自:http://www.cnblogs.com/weixing/p/5674078.html References required: HttpContextWrapper - System.We ...

  6. Python：Day14 集合、函数

    浅copy只copy一层 深copy相当于克隆一份 深copy要引入copy,具体如下: import copy wife = copy.copy() #此为浅copy,括号中要加copy的对象,相当 ...

  7. 路由器安装Openwrt&&***

    路由器安装Openwrt&&*** 前言 对于给路由器刷系统,肯定是有风险的,敢于承担风险的才开始动手. Openwrt其实也是一款嵌入式Linux系统,对于闪存大小也是有一定的要求的 ...

  8. StringRedisTemplate操作Redis

    在说到StringRedisTemplate操作Redis数据的时候,我们顺便谈谈StringRedisTemplate和RedisTemplate的区别. 一.StringRedisTemplate ...

  9. 【转】深入理解Java：注解（Annotation）--注解处理器

    https://www.cnblogs.com/peida/archive/2013/04/26/3038503.html 如果没有用来读取注解的方法和工作,那么注解也就不会比注释更有用处了.使用注解 ...

  10. Flink知识点

    1. Flink.Storm.Sparkstreaming对比 Storm只支持流处理任务,数据是一条一条的源源不断地处理,而MapReduce.spark只支持批处理任务,spark-streami ...