serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串

serialize()函数常用于将表单内容序列化,以便用于AJAX提交。

该函数主要根据用于提交有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里

该函数属于jQuery对象(实例)。

语法

jQuery 1.0 新增该函数。

jQueryObject.serialize( )

返回值

serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。

示例&说明

请参考下面这段初始HTML代码:

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步    <input name="hobby" type="checkbox" value="3" />羽毛球    <input name="btn" id="btn" type="button" value="点击" /></form>

对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

serialize()函数通常用于将表单内容序列化,以便通过AJAX方式提交。

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

    // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );      
    } );
       
} );

jQuery.serialize() 函数详解////////////z的更多相关文章

  1. jquery.serialize() 函数详解

    jQuery - serialize() 方法 W3School给出的定义与用法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 i ...

  2. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  3. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  4. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

  5. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  6. jQuery.hasClass() 函数详解

    jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...

  7. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  8. jQuery.makeArray() 函数详解

    jQuery.makeArray()函数用于将一个类数组对象转换为真正的数组对象. 所谓"类数组对象"就是一个常规的Object对象,但它和数组对象非常相似:具备length属性, ...

  9. jQuery.isEmptyObject() 函数详解

    所谓"空对象",即不包括任何可枚举(自定义)的属性.简而言之,就是该对象没有属性可以通过for...in迭代. 该函数属于全局jQuery对象. 语法 jQuery 1.4 新增该 ...

随机推荐

  1. 清华学堂 列车调度(Train)

    列车调度(Train) Description Figure 1 shows the structure of a station for train dispatching. Figure 1 In ...

  2. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  3. Softmax回归

    Reference: http://ufldl.stanford.edu/wiki/index.php/Softmax_regression http://deeplearning.net/tutor ...

  4. 【BFS】POJ 3278

    POJ 3278 Catch That Cow 题目:你要去抓一头牛,给出你所在的坐标和牛所在的坐标,移动方式有两种:要么前一步或者后一步,要么移动到现在所在坐标的两倍,两种方式都要花费一分钟,问你最 ...

  5. *HDU3367 最小生成树

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  6. javascript平时例子⑧(大屏轮播)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. Django入门实践(3)

    Django简单应用 前面简单示例说明了views和Template的工作过程,但是Django最核心的是App,涉及到App则会和Model(数据库)打交道.下面举的例子是创建一个简单应用wiki ...

  8. JDK环境变量设置

    1,新建JAVA_HOME变量 .  E:\TOOLS\JAVA\JDK1.8.0_111 2,新建CLASSPATH变量 . .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...

  9. Sony Z1 flashtool 刷机笔记

    第一次硬刷,(相较于recovery的卡刷)差点变成无限重启..记录一些关键步骤: 1 unlock bootloader http://developer.sonymobile.com/unlock ...

  10. [dpdk] 熟悉SDK与初步使用 (四)(L3 Forwarding源码分析)

    接续前节:[dpdk] 熟悉SDK与初步使用 (三)(IP Fragmentation源码分析) 前文中的最后一个问题,搁置,并没有找到答案.所以继续阅读其他例子的代码,想必定能在其他位置看到答案. ...