<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.serializeJson=function(filter){
                var serializeObj={};
                var array=this.serializeArray();
                var str=this.serialize();
                $(array).each(function(){
                    if(this.name!=filter){
                        if(serializeObj[this.name]){
                            if($.isArray(serializeObj[this.name])){
                                serializeObj[this.name].push(this.value);
                            }else{
                                serializeObj[this.name]=[serializeObj[this.name],this.value];
                            }
                        }else{
                            serializeObj[this.name]=this.value;
                        }
                    }
                });
                return serializeObj;
            };
        })(jQuery);

        function addP(){
            var json=$("#myform").serializeJson("data");
            //json转String
            console.log(JSON.stringify(json));
        }
    </script>
</head>
<body>
<form name="myform" id="myform" method="post">
    <div>
    姓名:<input type="text" name="pname" id="pname"/>
    年龄:<input type="text" name="age" id="age"/>
    兴趣:<textarea id="interest" name="interest"></textarea>
    </div>
    <div>
        <button type="button" onclick="addP();">提交</button>
    </div>
</form>

</body>
</html>

表单数据转换成json格式数据的更多相关文章

  1. <form> 标签 // HTML 表单 // from 表单转换成json 格式

    <form> 标签   // HTML 表单    // from 表单转换成json 格式 form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源 表 ...

  2. form表单序列化为json格式数据

    在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...

  3. 将表单数据转换成json字符串

    $("#theForm").serialize(); 可以获取表单的数据,但是是json字符串 需要转换成json才能正常使用

  4. form表单数据封装成json格式并提交给服务器

    1.jsp代码,form表单: <form action="#" id="costForm"> <input type="hidde ...

  5. jquery自动将form表单封装成json的具体实现

    前端页面:<span style="font-size:14px;"> <form action="" method="post&q ...

  6. java将XML文档转换成json格式数据

    功能 将xml文档转换成json格式数据 说明 依赖包:1. jdom-2.0.2.jar : xml解析工具包;2. fastjson-1.1.36.jar : 阿里巴巴研发的高性能json工具包 ...

  7. 把表单转成json,并且name为key,value为值

    http://jsfiddle.net/sxGtM/3/http://stackoverflow.com/questions/1184624/convert-form-data-to-js-objec ...

  8. PHP将数据库的数据转换成json格式

    header('content-type:application/json;charset=utf8');  $results = array();     while ($row = mysql_f ...

  9. 表单配置项写法，表单写成JSON数组套对象，一行是一个数组单位，一列是一个对象单位，然后再写一个公共组件读取这个配置，循环加载slot，外层载入slot的自定义部分，比如input select等，这种写法就是把组件嵌套改为配置方式

    表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...

随机推荐

  1. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  2. 线程使用方法 锁(lock,Rlock),信号了(Semaphore),事件(Event),条件(Ccndition),定时器(timer)

    2线程的使用方法  (1)锁机制       递归锁           RLock()    可以有无止尽的锁,但是会有一把万能钥匙       互斥锁:           Lock()     ...

  3. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  4. 5. Java中序列化的serialVersionUID作用

    Java序列化是将一个对象编码成一个字节流,反序列化将字节流编码转换成一个对象. 序列化是Java中实现持久化存储的一种方法:为数据传输提供了线路级对象表示法. Java的序列化机制是通过在运行时判断 ...

  5. bootStrap 教程 文档

    参考1: https://www.w3schools.com/bootstrap/default.asp 参考1:http://www.runoob.com/bootstrap/bootstrap-i ...

  6. EXCEL 数组公式

    数组里的元素,同一行内的各元素用英文逗号“,”分开,用英文分号“;”将各行分开 3.单列数组与单行数组的计算 两个数组相加,查看结果是几行几列:在任意单元格输入公式“=A80:A83+B87:E87” ...

  7. Spring MVC 基本储备

    @RequestMapping value, method, params 必须存在参数, headers: 请求头部必须是啥样 @PathVariable 绑定URL参数 HiddenHttpMet ...

  8. springmvc initial初始化

    项目需求是在启动服务时,将某些内容放入到共同里面,例如数据字典表内容. 但数据字典表内容存在于数据库中,使用传统的listener在加载时,无法获取service实例,打开事务控制. springmv ...

  9. UITableView cell 半透明效果，改变cell高度时背景不闪的解决方法

    如果直接指定cell.backgroundColor = = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 ...

  10. 学习笔记-db

    异步,最终一致性,幂等操作 关系型数据库隔离了数据的存储路径,让用户只关心查询的逻辑,为了实现事物和强一致性通过各种锁牺牲了性能 互联网在线处理需求排列 数据的扩展性 > 请求的响应时间 > ...