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 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
js实现select下拉框选择
Jan 11 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 读取文件乱码问题
2010/02/20 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP二维数组去重算法
2016/12/17 PHP
php防止sql注入的方法详解
2017/02/20 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python类的动态修改的实例方法
2017/03/24 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
教育系毕业生中文求职信范文
2013/10/06 职场文书
小学生通知书评语
2014/12/31 职场文书
关于倡议书的范文
2015/04/29 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
导游词之天津盘山
2019/11/01 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Java的Object类的九种方法
2022/04/13 Java/Android