JQuery中serialize() 序列化


Posted in Javascript onMarch 13, 2015

本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。下面介绍JQuery中serialize()的用法

一、serialize()定义和用法:

serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法:

$(selector).serialize()

详细说明

1、.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

2、.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些

3、只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

4、form里面的name不能够用 Js、jquery里的关键字。

例如:length

<form id="form1">

   <input name="length" type="text" value="pipi" />

   <input name="blog" type="text" value="blue submarine" />

</form>

//使用:$("#form1").serialize();

上面则获取不到值。

二、JQuery中serialize()实例

1、ajax serialize()

$.ajax({

    type: "POST",

    dataType: "json",

    url:ajaxCallBack,

    data:$('#myForm').serialize(),// 要提交表单的ID

    success: function(msg){

        alert(msg);

    }

});

2、serialize() 序列化表单实例

 <script src="jquery-1.7.min。js"></script>

<script>

$(function(){

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

     alert($("#myForm").serialize());

   });

});

</script>

<form id="myForm">

昵称 <input type="text" name="username" value="admin" /><br />

密码 <input type="password" name="password" value="admin123" /><br />

<input type="button" id="submit" value="序列化表单" /> 

</form>

点击按钮之后弹出:

username=admin&password=admin123

三、serialize是用param方法对serializeArray的一个简单包装

1、$.param()

$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。

param方法的js代码

 param: function( a ) {

        ///    <summary>

        ///        This method is internal.  Use serialize() instead.

        ///    </summary>

        ///    <param name="a" type="Map">A map of key/value pairs to serialize into a string.</param>'

        ///    <returns type="String" />

        ///    <private />

        var s = [ ];

        function add( key, value ){

            s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value);

        };

        // If an array was passed in, assume that it is an array

        // of form elements

        if ( jQuery.isArray(a) || a.jquery )

            // Serialize the form elements

            jQuery.each( a, function(){

                add( this.name, this.value );

            });

        // Otherwise, assume that it's an object of key/value pairs

        else

            // Serialize the key/values

            for ( var j in a )

                // If the value is an array then the key names need to be repeated

                if ( jQuery.isArray(a[j]) )

                    jQuery.each( a[j], function(){

                        add( j, this );

                    });

                else

                    add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );

        // Return the resulting serialization

        return s.join("&").replace(/%20/g, "+");

    }

例如

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k);    //输出a=1&b=2&c=3

2、serializeArray

serializeArray方法是将一个表单当中的各个字段序列化成一个数组

serializeArray方法的jquery定义

serializeArray: function() {

        ///    <summary>

        ///        Serializes all forms and form elements but returns a JSON data structure.

        ///    </summary>

        ///    <returns type="String">A JSON data structure representing the serialized items.</returns>

        return this.map(function(){

            return this.elements ? jQuery.makeArray(this.elements) : this;

        })

        .filter(function(){

            return this.name && !this.disabled &&

                (this.checked || /select|textarea/i.test(this.nodeName) ||

                    /text|hidden|password|search/i.test(this.type));

        })

        .map(function(i, elem){

            var val = jQuery(this).val();

            return val == null ? null :

                jQuery.isArray(val) ?

                    jQuery.map( val, function(val, i){

                        return {name: elem.name, value: val};

                    }) :

                    {name: elem.name, value: val};

        }).get();

    }

serializeArray数据例子

[ {   name : username,   value : 中国   }, {   name : password,   value : xxx  }]

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 #Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 #Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 #Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 #Javascript
JavaScript中常用的六种互动方法示例
Mar 13 #Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 #Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 #Javascript
You might like
zend framework配置操作数据库实例分析
2012/12/06 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Python闭包实现计数器的方法
2015/05/05 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python表格存取的方法
2018/03/07 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
医院保洁员管理制度
2015/08/05 职场文书
小学语文教学随笔
2015/08/14 职场文书