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 相关文章推荐
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 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
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解基于webpack搭建react运行环境
2017/06/01 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
详解vue v-model
2020/08/31 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
详解Python自建logging模块
2018/01/29 Python
Python入门之后再看点什么好?
2018/03/05 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python中作用域的深入讲解
2018/12/10 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
师范生个人推荐信
2013/11/29 职场文书
信访工作经验交流材料
2014/05/23 职场文书
争先创优活动总结
2014/08/27 职场文书
红旗渠导游词
2015/02/09 职场文书
党员转正意见怎么写
2015/06/03 职场文书
余世维讲座观后感
2015/06/11 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
浅谈如何保证Mysql主从一致
2022/03/13 MySQL