jquery.serialize() 函數(shù)語(yǔ)法及簡(jiǎn)單實(shí)例
jQuery - serialize() 方法
W3School給出的定義與用法:
serialize() 方法通過(guò)序列化表單值,創(chuàng)建 URL 編碼文本字符串。
您可以選擇一個(gè)或多個(gè)表單元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 請(qǐng)求時(shí)用于 URL 查詢字符串中。
語(yǔ)法
$(selector).serialize()詳細(xì)說(shuō)明
.serialize() 方法創(chuàng)建以標(biāo)準(zhǔn) URL 編碼表示的文本字符串。它的操作對(duì)象是代表表單元素集合的 jQuery 對(duì)象。
------------------------- 分割線 ----------------------
serialize()函數(shù)用于序列化一組表單元素,將表單內(nèi)容編碼為用于提交的字符串。
serialize()函數(shù)常用于將表單內(nèi)容序列化,以便用于AJAX提交。
該函數(shù)主要根據(jù)用于提交的有效表單控件的name和value,將它們拼接為一個(gè)可直接用于表單提交的文本字符串,該字符串已經(jīng)過(guò)標(biāo)準(zhǔn)的URL編碼處理(字符集編碼為UTF-8)。
該函數(shù)不會(huì)序列化不需要提交的表單控件,這和常規(guī)的表單提交行為是一致的。例如:不在<form>標(biāo)簽內(nèi)的表單控件不會(huì)被提交、沒(méi)有name屬性的表單控件不會(huì)被提交、帶有disabled屬性的表單控件不會(huì)被提交、沒(méi)有被選中的表單控件不會(huì)被提交。
與常規(guī)表單提交不一樣的是:常規(guī)表單一般會(huì)提交帶有name的按鈕控件,而serialize()函數(shù)不會(huì)序列化帶有name的按鈕控件。
返回值
serialize()函數(shù)的返回值為String類型,返回將表單元素編碼后的可用于表單提交的文本字符串。
示例&說(shuō)明
請(qǐng)參考下面這段初始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">一年級(jí)</option> <option value="2">二年級(jí)</option> <option value="3" selected="selected">三年級(jí)</option> <option value="4">四年級(jí)</option> <option value="5">五年級(jí)</option> <option value="6">六年級(jí)</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="點(diǎn)擊" /> </form>
對(duì)<form>元素進(jìn)行序列化可以直接序列化其內(nèi)部的所有表單元素。
// 序列化<form>內(nèi)的所有表單元素 // 序列化后的結(jié)果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2 alert( $("form").serialize() );
我們也可以直接對(duì)部分表單元素進(jìn)行序列化。
// 序列化所有的text、select、checkbox表單元素 // 序列化后的結(jié)果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2 alert( $(":text, select, :checkbox").serialize() );
serialize()
函數(shù)通常用于將表單內(nèi)容序列化,以便通過(guò)AJAX方式提交。
$("#btn").click( function(){ // 將當(dāng)前表單內(nèi)容以POST請(qǐng)求的AJAX方式提交到"http://www.365mini.com" $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){ alert( "AJAX提交成功!" ); } ); } );
以上這篇jquery.serialize() 函數(shù)語(yǔ)法及簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類型的方法
這篇文章主要介紹了jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類型的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳文件的類型與大小運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片預(yù)覽大圖效果
我們可以借助jQuery來(lái)實(shí)現(xiàn)一些很酷炫的效果,本篇為大家介紹下通過(guò)jQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)了圖片數(shù),圖片會(huì)放大進(jìn)行預(yù)覽大圖,需要的朋友可以參考下2014-04-04jQuery結(jié)合CSS制作動(dòng)態(tài)的下拉菜單
這篇文章主要介紹了jQuery結(jié)合CSS制作一個(gè)動(dòng)態(tài)的下拉菜單,下拉菜單可以彌補(bǔ)空間的不足,感興趣的小伙伴們可以參考一下2015-10-10使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告
下面小編就為大家?guī)?lái)一篇使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07jquery imgareaselect 使用利用js與程序結(jié)合實(shí)現(xiàn)圖片剪切
當(dāng)前在ff3下,用jquery的 width()與height()函數(shù),在不設(shè)置圖片的寬度與高度的時(shí)候,不能取到 需要在圖片load函數(shù)里面初始化才可以2009-07-07