<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

 </head>

 <body>

    <form id="myform">

        <table>

            <tr>

                <td>姓名:</td>

                <td> <input type="text" name="name" value="旺旺"/> </td>

            </tr>

            <tr>

                <td>性别:</td>

                <td>

                    <input type="radio" name="sex" value="男" checked> 男

                    <input type="radio" name="sex" value="女"> 女

                </td>

            </tr>

            <tr>

                <td>年龄:</td>

                <td>

                    <select name="age">

                        <option value="10">10</option>

                        <option value="20" selected>20</option>

                        <option value="30">30</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>爱好:</td>

                <td>

                    <input type="checkbox" value="read" name="hobby" checked>读书

                    <input type="checkbox" value="music" name="hobby" checked>音乐

                    <input type="checkbox" value="draw" name="hobby" checked>画画

                    <input type="checkbox" value="sport" name="hobby">运动

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="button" id="submitBtn" value="提交" />

                </td>

            </tr>

        </table>

    </form>  

  <script>

    /**序列化表单，多个value用数组存放**/

    $.fn.serializeObject = function() {

        var o = {};

        var arr = this.serializeArray();

        $.each(arr,function(){

            if (o[this.name]) {  //返回json中有该属性

                if (!o[this.name].push) { //将已存在的属性值改成数组

                    o[this.name] = [ o[this.name] ];

                }

                o[this.name].push(this.value || ''); //将值存放到数组中

            } else {  //返回json中没有有该属性

                o[this.name] = this.value || '';  //直接将属性和值放入返回json中

            }

        });

        return o;

    } 

    /**序列化表单，多个value用逗号隔开**/

    $.fn.serializeObject2 = function() {

        var o = {};

        var arr = this.serializeArray();

        $.each(arr,function(){

            if (o[this.name]) {  //返回json中有该属性

                o[this.name]=o[this.name]+','+(this.value || '');//序列化表单，多个value用逗号隔开

            } else {  //返回json中没有有该属性

                o[this.name] = this.value || '';  //直接将属性和值放入返回json中

            }

        });

        return o;

    }  

    /**初始化测试**/

    $(function() {

        $("#submitBtn").click(function() {

            var params = $("#myform").serializeObject(); //将表单序列化为JSON对象

            console.info(params);

            var params2 = $("#myform").serializeObject2(); //将表单序列化为JSON对象

            console.info(params2);  

         });

        var json={'a':'a我的#+~','b':'b','c':'c'};

        var jsonStr=JSON.stringify(json);//json转字符串

        var json2=JSON.parse(jsonStr);//字符串转json

        console.info(jsonStr);

        console.info('encodeURI:\n'+encodeURI(jsonStr));//转码非url的字符

        console.info('encodeURIComponent:\n'+encodeURIComponent(jsonStr));//转码所有的特殊字符

        /*encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。*/

        console.info(json2);

    }) 

  </script>

 </body>

</html>

Jquery表单序列化和json操作的更多相关文章

  1. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

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

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

  3. 扩展JQUERY 表单加载JSON数据

    $.fn.extend({ //表单加载json对象数据 setForm : function (jsonValue) { var obj = this; $.each(jsonValue, func ...

  4. jquery表单序列化

    $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...

  5. jquery将form表单序列化常json

    var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;} ...

  6. jquery 表单序列化

    1.序列化为URL 编码文本字符串 var serialize = $("form[name=testForm]").serialize(); console.log(serial ...

  7. 将任意一个jQuery对象进行表单序列化，免除了提交请求时大量拼写表单数据的烦恼，支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  8. jquery将表单序列化

    在工作中经常要将表单数据通过ajax提交,所以需要将表单序列化为json对象. 已经有大神提供了,以前一直百度,现在决定抄过来收藏一下,方便以后自己用,尊重原创,文章转载自:http://www.cn ...

  9. jquery扩展方法（表单数据格式化为json对象）

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

随机推荐

  1. hihoCoder-1097-Prim

    这题就是prim的板子题,不过如果用end每次初始化为-1的话,我们就不需要对于每次选中的下一个点进行判断是否选中了,因为每次外层循环第一次进入都是可以的. 然后还很 (i=1:i<=n;i++ ...

  2. 【树状数组 离散化】bzoj1573: [Usaco2009 Open]牛绣花cowemb

    解方程题! Description Bessie学会了刺绣这种精细的工作.牛们在一片半径为d(1 <= d <= 50000)的圆形布上绣花. 它们一共绣了N (2 <= N < ...

  3. 怎么用js写一个类似于百度输入框的搜索插件

    PS:这次做的这个小插件只是在前端实现,并没有经过数据库.需要用到的的框架:1.bootstrap.css的样式 2.Vue.js 最终效果如下: JS部分: $(window).click(func ...

  4. axure笔记--变量值在页面之间的传递

    fx     先给局部变量赋值,再添加到上面,即给全局变量赋值. 实现页面跳转: 1.打开链接,选择要跳转的下个页面---确定 2.打开那个下一个跳转的页面,要得到上个页面的值,需要到页面交互---页 ...

  5. pandas模块(很详细归类),pd.concat(后续补充)

    6.12自我总结 一.pandas模块 import pandas as pd约定俗称为pd 1.模块官方文档地址 https://pandas.pydata.org/pandas-docs/stab ...

  6. 微信小程序登录对接Django后端实现JWT方式验证登录

    先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...

  7. python-数字类型内置方法

    数字类型内置方法 为什么要有数据类型? 数据是用来表示状态的,不同的状态就应该用不同的数据类型去表示 整型(int) 用途:年龄.号码.银行卡号等 定义:可以使用int()方法将纯数字的字符串转换为十 ...

  8. django 12天(跨域,文件上传,下载，cookie，session)

    django 12天(跨域,文件上传,下载) 跨域 什么是跨域 1.协议不同 2.端口不同 3.主机不同 如何解决跨域 1.安装django-cors-headers模块 2.在settings.py ...

  9. (转) 改变UITextField placeHolder颜色、字体 、输入光标位置等

    我们有时需要定制化UITextField对象的风格,可以添加许多不同的重写方法,来改变文本字段的显示行为.这些方法都会返回一个CGRect结构,制定了文本字段每个部件的边界范围,甚至修改placeHo ...

  10. （转）UILabel常用属性

    Java代码 收藏代码 #import "ViewController.h" #import <CoreText/CoreText.h> @interface View ...