2023年應(yīng)用實(shí)例解析大全

ｊQueryAjax應(yīng)用實(shí)例解析大全

?

HYPERＬＩＮK"htｔp:／/www.sｕnxin．ｏｒg／forum/ｔhｒead／１6７62．ｈｔmｌ"\o"JQUERY+ASＰ．NET的ＡJＡX文獻(xiàn)上傳"JQUERY+AＳP．．..?

ＨYＰERLＩNK"http://www.ｓｕnxiｎ.org/foruｍ/thrｅad/１6180．html"\o"AＪAX框架用Asｐ.ｎｅtajax還是Jqueｒy"AJAX框架用A...?

ＨＹPERＬINＫ＂http://www.suｎxin.orｇ／foruｍ／thread/１6181.html"\o＂AJAX框架用Aajax還是Ｊquery"AJAX框架用Ａ..．?

HＹPERLIＮＫ＂htｔp：／/wwｗ.sｕnxin.ｏrg/forum/tｈreａｄ/17771．html"＼o"在ＪＳP中使用ｊｑuery的ajax功能"在JSP中使用ｊｑuｅ...?

HＹPERＬIＮK"http://www．ｓuｎxｉn.ｏrg/foｒｕm/threａd/１591７.html＂\o"ASP.netAＪＡX代碼實(shí)例"AＳP.ｎetAJA...

HＹPＥRLINK"http://www.sｕnxin．ｏrｇ/fｏrum/ｓeａｒch.actiｏn？oｐtion=2＆keyｗord＝j(luò)Queｒy%20Ajax%2０應(yīng)用實(shí)例解析大全＂\ｏ"查看更多相關(guān)帖子推薦..."更多相關(guān)推薦．．.

[關(guān)鍵字:jQueryAjax應(yīng)用實(shí)例解析大全]??

１.load(url,[ｄａt(yī)a]，[cａllbａck])：載入遠(yuǎn)程HTML文獻(xiàn)代碼并插入至DOＭ中。ｕrｌ(String):請(qǐng)求的HTML頁(yè)的ＵRL地址。dａｔa(Map):(可選參數(shù))發(fā)送至服務(wù)器的key／valuｅ數(shù)據(jù)。cａllｂack(Caｌlbａck):(可選參數(shù))請(qǐng)求完畢時(shí)（不需要是ｓuccesｓ的)的回調(diào)函數(shù)。這個(gè)方法默認(rèn)使用GEＴ方式來(lái)傳遞的，假如[data］參數(shù)有傳遞數(shù)據(jù)進(jìn)去，就會(huì)自動(dòng)轉(zhuǎn)換為ＰOＳT方式的。ｊＱueｒy1.2中,可以指定選擇符，來(lái)篩選載入的HＴMＬ文檔,ＤＯM中將僅插入篩選出的ＨＴML代碼。語(yǔ)法形如"uｒｌ#somｅ>seｌecｔor"。這個(gè)方法可以很方便的動(dòng)態(tài)加載一些ＨTMＬ文獻(xiàn)，例如表單。示例代碼:$(＂．a(chǎn)jax.lｏad"）.lｏad（"ｈttp：//wwｗ.ｃｎｂlｏｇs.coｍ/yｅe(cuò)r/aｒｃhive/２023/０6/10/１5０0６82．ｈtml.post",

function(responseTexｔ,teｘｔＳtatus,XMLHｔｔpRｅquｅｓｔ){

?thiｓ;/／在這里ｔhis指向的是當(dāng)前的DOＭ對(duì)象,即$(".ａjａｘ.lｏad")[0]

//aｌeｒt(ｒespｏnｓｅTｅxt);/／請(qǐng)求返回的內(nèi)容

//alｅrｔ（ｔextＳtatus);/／請(qǐng)求狀態(tài):suｃcess，ｅrror?／／aleｒt(XMLHｔtpReｑuest）;／／XMLHttpReｑuｅst對(duì)象?})；

這里將顯示結(jié)果。

注：不知道為什么URＬ寫絕對(duì)途徑在FF下會(huì)犯錯(cuò)，知道的麻煩告訴下。下面的get()和poｓｔ(）示例使用的是絕對(duì)途徑，所以在FF下你將會(huì)犯錯(cuò)并不會(huì)看到返回結(jié)果。尚有g(shù)ｅｔ（)和posｔ()示例都是跨域調(diào)用的，發(fā)現(xiàn)傳上來(lái)后沒(méi)辦法獲取結(jié)果，所以把運(yùn)營(yíng)按鈕去掉了。

２.ｊQueｒy.ｇet(ｕrl,[ｄａt(yī)a],[cａllbａck]):使用ＧＥT方式來(lái)進(jìn)行異步請(qǐng)求參數(shù)：ｕrl(Ｓtrｉｎg):

發(fā)送請(qǐng)求的URＬ地址.dａｔa(Maｐ):（可選)要發(fā)送給服務(wù)器的數(shù)據(jù)，以Keｙ/value的鍵值對(duì)形式表達(dá)，會(huì)做為QuｅｒyStrｉng附加到請(qǐng)求URL中。callbａck(Function):(可選)載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Responｓe的返回狀態(tài)是sｕccess才是調(diào)用該方法)。這是一個(gè)簡(jiǎn)樸的GET請(qǐng)求功能以取代復(fù)雜$.aｊaｘ。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。假如需要在犯錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用$.aｊax。示例代碼:$.ｇｅt（＂./Ajaｘ.aspx",{Ａcｔion:"ｇｅt＂,Namｅ:＂lulu"}，ｆunctiｏn（data，textStatuｓ）｛

?／/返回的data可以是xmlDｏc,ｊsonObj,htｍl,teｘt,等等．

ｔhis;／/在這里thiｓ指向的是Ajax請(qǐng)求的選項(xiàng)配置信息,請(qǐng)參考下圖?aleｒt(datａ);

//aleｒt(ｔextSｔatus)；//請(qǐng)求狀態(tài):sucｃesｓ,eｒror等等。

?當(dāng)然這里捕獲不到ｅrrｏr,由于eｒｒor的時(shí)候主線不會(huì)運(yùn)營(yíng)該回調(diào)函數(shù)?/／aｌerｔ(tｈｉs);

});點(diǎn)擊發(fā)送請(qǐng)求:ｊQuery．geｔ()回調(diào)函數(shù)里面的tｈiｓ，指向的是Ａjax請(qǐng)求的選項(xiàng)配置信息:

3.jQuerｙ.ｐost(url,［ｄatａ],[ｃａlｌｂａck]，［typｅ])：使用POST方式來(lái)進(jìn)行異步請(qǐng)求

參數(shù)：ｕrl(Ｓtｒｉnｇ):發(fā)送請(qǐng)求的URL地址.ｄata(Map）:(可選)要發(fā)送給服務(wù)器的數(shù)據(jù)，以Keｙ/vaｌue的鍵值對(duì)形式表達(dá)。callbａck(Fｕｎctｉon)：(可選)載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Ｒeｓｐoｎse的返回狀態(tài)是success才是調(diào)用該方法)。ｔype(Stｒiｎg)：(可選）官方的說(shuō)明是：Typeofdａt(yī)atｏbeｓeｎt。其實(shí)應(yīng)當(dāng)為客戶端請(qǐng)求的類型(ＪSON，ＸMＬ,等等)這是一個(gè)簡(jiǎn)樸的POST請(qǐng)求功能以取代復(fù)雜$．a(chǎn)jax。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。假如需要在犯錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用＄.ａｊax。示例代碼：Ajax.aｓpx：Ｒesponse.CoｎｔentＴyｐｅ=＂applicatｉｏn/ｊson";

Respoｎse.Write（＂{result:'＂+Request［＂Namｅ"］+",你好！(這消息來(lái)自服務(wù)器)'}＂）;jQｕｅry代碼:$.post("Aｊax.ａsｐx",{Acｔioｎ:＂poｓt＂,Ｎame："luｌu"｝,?

funcｔｉoｎ(data,teｘｔＳｔatuｓ)｛?

//data可以是xmlＤoc,jsｏｎObj,html,tｅｘt，等等.

//ｔhis;/／這個(gè)Aｊａｘ請(qǐng)求的選項(xiàng)配置信息，請(qǐng)參考jQｕery.ｇｅｔ（）說(shuō)到的ｔhiｓ

ａｌert(data.resｕlｔ)；

},"jsｏｎ＂);點(diǎn)擊提交：這里設(shè)立了請(qǐng)求的格式為＂jｓon＂：假如你設(shè)立了請(qǐng)求的格式為"jsｏｎ"，此時(shí)你沒(méi)有設(shè)立Rｅｓpｏnsｅ回來(lái)的ContentTyｐe為:Resｐonｓe．CｏｎtｅntTyｐe="applicatioｎ/jsｏn";那么你將無(wú)法捕獲到返回的數(shù)據(jù)。注意一下,aｌeｒt(data.resｕｌt)；由于設(shè)立了Accept報(bào)頭為“jsoｎ”，這里返回的data就是一個(gè)對(duì)象，并不需要用eval(）來(lái)轉(zhuǎn)換為對(duì)象。

4.jQueｒｙ.getＳcｒipt(ｕrl,[caｌlbaｃｋ]):通過(guò)ＧＥT方式請(qǐng)求載入并執(zhí)行一個(gè)JavaSｃriｐt文獻(xiàn)。參數(shù)uｒl（String):待載入JS文獻(xiàn)地址。callｂacｋ(Ｆunｃtion):(可選）成功載入后回調(diào)函數(shù)。jQuｅｒy1.2版本之前，gｅtScｒipt只能調(diào)用同域JS文獻(xiàn)。1．2中，您可以跨域調(diào)用JavaSｃriｐt文獻(xiàn)。注意:Saｆａri2或更早的版本不能在全局作用域中同步執(zhí)行腳本。假如通過(guò)getSｃrｉpt加入腳本，請(qǐng)加入延時(shí)函數(shù)。這個(gè)方法可以用在例如當(dāng)只有編輯器fｏcus(）的時(shí)候才去加載編輯器需要的JS文獻(xiàn).下面看一些示例代碼:加載并執(zhí)行tesｔ.ｊs。jQuerｙ代碼:＄.getScｒipt(＂test.js"）;加載并執(zhí)行AjaxＥvｅnt.js，成功后顯示信息。jQuery代碼：＄.getSｃript("AjaｘＥｖenｔ.js",funｃtiｏｎ（)｛

?alert(＂AjaxEvent.js加載完畢并執(zhí)行完畢.你再點(diǎn)擊上面的Ｇet或Poｓt按鈕看看有什么不同?");

?});加載完后請(qǐng)重新點(diǎn)擊一下上面的Ｌｏａd請(qǐng)求看看有什么不同。jQueryAjax事件Ajaｘ請(qǐng)求會(huì)產(chǎn)生若干不同的事件,我們可以訂閱這些事件并在其中解決我們的邏輯。在ｊQuery這里有兩種Ajaｘ事件：局部事件和全局事件。局部事件就是在每次的Aｊax請(qǐng)求時(shí)在方法內(nèi)定義的，例如:$.ajaｘ(｛?

beｆorｅSend:fｕnctiｏn（){?

／/HaｎdlethebｅforeSendevenｔ

}，?compleｔｅ：fuｎcｔioｎ(){??//Hａndlｅtheｃoｍpleteeveｎt

｝?//．．.

})；全局事件是每次的Ａｊａx請(qǐng)求都會(huì)觸發(fā)的，它會(huì)向DOM中的所有元素廣播，在上面getSｃripｔ()示例中加載的腳本就是全局Aｊax事件。全局事件可以如下定義:$("＃loading").bind("ajａxＳｅnd"，fｕnｃtiｏｎ()｛?

$（thｉｓ).sｈoｗ（);?

｝).ｂind("ajaｘCompletｅ"，ｆunction(）{

$(ｔhis).hｉde(）;?

｝)；或者：$("＃loａｄing＂).ajaxＳｔart（fuｎｃtiｏn（){

?$(ｔｈiｓ)．sｈow（）;

?｝);我們可以在特定的請(qǐng)求將全局事件禁用，只要設(shè)立下global選項(xiàng)就可以了:$．a(chǎn)jax({?

urｌ："tｅst．html",

?gloｂal:ｆａｌse，//禁用全局Ajａx事件.?//...?})；下面是jQuｅry官方給出的完整的Ajax事件列表:ajaxStart（ＧlｏｂalEｖent)

ThiｓevenｔisbrｏadcastiｆａnAjaxreqｕｅstisｓtartｅｄａndｎｏｏtｈerAjaｘrequestsａrecurrentlyruｎning.bｅforeSｅnｄ(LoｃalEvｅnｔ)

Ｔｈisevent,whiｃhiｓtrigｇｅreｄbefｏreaｎＡjaxreｑｕｅstisｓtarted,allowｓyoutｏmodifｙｔheXMLＨttpRequestobject(ｓettingaｄｄitｉoｎalｈeaderｓ,ｉfneedbe.）ajａｘSeｎd(ＧlｏbalEｖent)

Thｉｓｇｌｏbaleventisalsotrigｇerｅdbeｆoｒｅthｅrｅｑｕestiｓｒｕｎ.sｕｃceｓｓ(LocalEvenｔ)

Thiseventisonlycａｌlｅdiｆtherequestｗassucｃｅｓsfｕl(noerrｏrsｆromｔheseｒver,ｎoerrorｓwiththｅdatａ）.ajaxSｕｃcｅsｓ(GｌｏｂalEvenｔ)

Ｔhiseveｎtisａｌsoonlycallediｆtheｒeqｕｅｓtｗassｕcｃessfｕｌ.erｒor(LocalＥｖｅnt)

Thisｅventisonlｙｃalledifａnerrorｏcｃurreｄwｉtｈtheｒｅquest（ｙoucａnneveｒhaｖebｏｔhanｅrrorandasuccesscallbaｃkｗithaｒequest)．a(chǎn)ｊaxErｒor(GlｏbaｌEvｅnt）

Tｈisglｏbaleventbehaｖesｔhesameastｈeｌocaｌerrorｅｖent.ｃompｌeｔe(LocａｌEvent)

Thisｅventiscallｅdregaｒdleｓsｏfiftheｒｅquesｔwassuｃcessｆul,oｒnoｔ.Yｏｕwillａlwaysreceiｖeacoｍpleｔecａｌlback,eｖenforsyncｈronouｓreｑuestｓ.aｊaxＣompletｅ(ＧloｂａlEvent)?TｈiseventbeｈａｖestｈesameasthｅcｏmpleteevｅnｔaｎdwiｌlｂetrigｇeredevｅrytimeaｎA(yù)jaxrｅqueｓｔfiniｓheｓ.ａjaxＳｔoｐ(ＧloｂａlEｖenｔ)

ThｉsｇlobaleｖｅntｉｓｔriggｅrｅdiftherearenomoreＡｊaｘreqｕestsｂeingproｃessed.具體的全局事件請(qǐng)參考API文檔。

好了,下面開(kāi)始說(shuō)jＱｕerｙ里面功能最強(qiáng)的Ａjax請(qǐng)求方法＄.ａｊax();

jQueｒｙ.ajax(optiｏｎs):通過(guò)ＨTＴＰ請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)這個(gè)是ｊQuｅry的底層AＪAX實(shí)現(xiàn)。簡(jiǎn)樸易用的高層實(shí)現(xiàn)見(jiàn)$.get，＄．ｐosｔ等。＄.ajax()返回其創(chuàng)建的XＭＬＨｔｔpRequeｓt對(duì)象。大多數(shù)情況下你無(wú)需直接操作該對(duì)象，但特殊情況下可用于手動(dòng)終止請(qǐng)求。注意:假如你指定了ｄatａＴｙpe選項(xiàng)，請(qǐng)保證服務(wù)器返回對(duì)的的MＩＭＥ信息,(如xml返回＂teｘｔ/xｍl")。錯(cuò)誤的MIME類型也許導(dǎo)致不可預(yù)知的錯(cuò)誤。見(jiàn)ＨＹPERLINＫ＂htｔp：//docs．jqｕeｒy.ｃｏm／Sｐeｃifyｉng＿thｅ_Ｄaｔa_Ｔype＿for_AJＡX_Requests"SｐecｉfyingthｅDatａTypeforＡJＡXＲｅquｅstｓ。?當(dāng)設(shè)立datatype類型為'scrｉｐt＇的時(shí)候,所有的遠(yuǎn)程(不在同一個(gè)域中)ＰＯＳT請(qǐng)求都回轉(zhuǎn)換為GET方式。$.ajax()只有一個(gè)參數(shù)：參數(shù)ｋｅｙ／vａlｕe對(duì)象,包含各配置及回調(diào)函數(shù)信息。具體參數(shù)選項(xiàng)見(jiàn)下。jＱｕeｒy1.2中，您可以跨域加載JＳOＮ數(shù)據(jù)，使用時(shí)需將數(shù)據(jù)類型設(shè)立為ＨＹPEＲＬINＫ"hｔtｐ://bｏb.ｐythonmaｃ．org/ａｒchives/20２3／12/05/remote-json－jsonｐ/"ＪＳOＮP。使用HYPERＬINK"htｔp:/／boｂ.pｙthonmac.oｒg/archｉves/２02３/１2/0５/remote-json－ｊｓｏnp/＂ＪSONP形式調(diào)用函數(shù)時(shí),如"myuｒl?calｌback=?"jQｕｅry將自動(dòng)替換?為對(duì)的的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。數(shù)據(jù)類型設(shè)立為"jsｏnp"時(shí),jQｕｅrｙ將自動(dòng)調(diào)用回調(diào)函數(shù)。(這個(gè)我不是很懂）參數(shù)列表：參數(shù)名類型描述urlＳtring（默認(rèn):當(dāng)前頁(yè)地址）發(fā)送請(qǐng)求的地址。tｙｐeＳtrinｇ(默認(rèn)："ＧEＴ"）請(qǐng)求方式("PＯSＴ"或"GET")，默認(rèn)為"GET＂。注意：其它HＴTP請(qǐng)求方法，如PUT和DELＥＴE也可以使用,但僅部分瀏覽器支持。tｉmeｏutNｕmber設(shè)立請(qǐng)求超時(shí)時(shí)間（毫秒)。此設(shè)立將覆蓋全局設(shè)立。asynｃBooｌｅａn(默認(rèn)：ｔrue)默認(rèn)設(shè)立下,所有請(qǐng)求均為異步請(qǐng)求。假如需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)立為faｌsｅ。注意，同步請(qǐng)求將鎖住瀏覽器,用戶其它操作必須等待請(qǐng)求完畢才可以執(zhí)行。befｏｒeSendFｕnction發(fā)送請(qǐng)求前可修改XMLHｔtpＲeｑｕeｓt對(duì)象的函數(shù)，如添加自定義HＴTＰ頭。XMLHtｔpＲeqｕｅst對(duì)象是唯一的參數(shù)。ｆunctiｏn(XMＬHttｐReqｕesｔ）｛

thｉs;//theｏptiｏｎｓｆorｔhｉsajaｘreqｕeｓｔ

｝cacheＢooｌean(默認(rèn):tｒｕe）jQuery１.２新功能,設(shè)立為fａlse將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。ｃompleteＦunction請(qǐng)求完畢后回調(diào)函數(shù)(請(qǐng)求成功或失敗時(shí)均調(diào)用)。參數(shù)：XMLHｔｔpRequest對(duì)象,成功信息字符串。functiｏn(XＭLHttpＲequｅst,textStatus){

thｉs;//ｔhｅoptionsｆｏrthisａjaｘreｑuｅst

}ｃoｎtｅｎｔTypｅStrｉng(默認(rèn):"application/x-ｗwｗ-form-urlｅncｏdｅd"）發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。ｄatａObｊｅｃｔ,?Stｒing發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET請(qǐng)求中將附加在URL后。查看prｏcessＤaｔa選項(xiàng)說(shuō)明以嚴(yán)禁此自動(dòng)轉(zhuǎn)換。必須為Key/Vａlｕe格式。假如為數(shù)組,jQuery將自動(dòng)為不同值相應(yīng)同一個(gè)名稱。如{ｆoｏ:[＂bar1"，"ｂar2＂]}轉(zhuǎn)換為'&ｆoo=bar１&foo=bar２'。datａTypｅStｒing預(yù)期服務(wù)器返回的數(shù)據(jù)類型。假如不指定，jＱuｅry將自動(dòng)根據(jù)HTTP包MIME信息返回respoｎｓｅXML或responｓeText，并作為回調(diào)函數(shù)參數(shù)傳遞，可用值："xml＂：返回XＭL文檔，可用jQueｒy解決。"htmｌ"：返回純文本HＴMＬ信息;包含scｒｉpt元素。"scriｐt＂:返回純文本JａvaＳcripｔ代碼。不會(huì)自動(dòng)緩存結(jié)果。"json":返回JSON數(shù)據(jù)。"jsonp":HYPＥRLINＫ"ｈttp://ｂob．ｐｙthonmac.ｏrg/archiveｓ/２023/12/05/remｏte－ｊsｏn-jsonp/"JSONP格式。使用HYPERLＩNK"hｔtp://bob.pyｔhonｍac.oｒg/archiｖes／２0２3/12/０5／remｏtｅ-json-jｓonp／"JＳＯＮP形式調(diào)用函數(shù)時(shí)，如"ｍｙuｒl？callｂack=？"ｊＱｕery將自動(dòng)替換?為對(duì)的的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。erｒorFunｃtion(默認(rèn):自動(dòng)判斷（ｘmｌ或hｔml)）請(qǐng)求失敗時(shí)將調(diào)用此方法。這個(gè)方法有三個(gè)參數(shù)：XMＬHｔtｐRequest對(duì)象，錯(cuò)誤信息,（也許)捕獲的錯(cuò)誤對(duì)象。fｕnｃtion(XMLＨttpＲequesｔ,textStatus,erroｒＴhrown){??//通常情況下tｅxtStatｕs和erroｒTｈown只有其中一個(gè)有值

ｔｈis;／／thｅoptｉonsｆｏrthisajaxｒeｑｕｅｓt?}ｇlｏbalBｏoleａｎ(默認(rèn):truｅ)是否觸發(fā)全局ＡJAX事件。設(shè)立為falｓe將不會(huì)觸發(fā)全局AJAＸ事件，如ajａxStａrt或aｊaxStoｐ?？捎糜诳刂撇煌腁jax事件iｆMｏdifiedBooleａn(默認(rèn):ｆalｓe）僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。使用ＨＴTP包Laｓｔ-Mｏdified頭信息判斷。procｅｓsDatａBooleａn(默認(rèn):ｔruｅ）默認(rèn)情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象(技術(shù)上講并非字符串)以配合默認(rèn)內(nèi)容類型"aｐpｌicatｉon/x-ｗｗｗ－ｆorm-urleｎcoded"。假如要發(fā)送DOＭ樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)立為falsｅ。sucｃｅssFuｎction請(qǐng)求成功后回調(diào)函數(shù)。這個(gè)方法有兩個(gè)參數(shù)：服務(wù)器返回?cái)?shù)據(jù)，返回狀態(tài)fｕnctｉon(data，ｔextStatus){

//datacoulｄbeｘmlDoc,jsonObj,html,teｘt，etｃ．．.?this；//theoｐtiｏnｓforthisajaxrequest?}這里有幾個(gè)Ａjax事件參數(shù):bｅｆoreSend,succesｓ,coｍpｌetｅ,error。我們可以定義這些事件來(lái)很好的解決我們的每一次的Ajaｘ請(qǐng)求。注意一下,這些Ajax事件里面的this都是指向Aｊaｘ請(qǐng)求的選項(xiàng)信息的（請(qǐng)參考說(shuō)ｇeｔ()方法時(shí)的thｉs的圖片)。?請(qǐng)認(rèn)真閱讀上面的參數(shù)列表,假如你要用jＱuery來(lái)進(jìn)行Ａｊaｘ開(kāi)發(fā),那么這些參數(shù)你都必需熟知的。示例代碼,獲取博客園首頁(yè)的文章題目：$.aｊax（{??ｔｙpｅ:"geｔ",

urｌ："ｈttp://wwｗ.cnblｏ/ｒss",

beｆoｒｅSenｄ:ｆunctiｏn（ＸＭＬHｔtｐRｅquest){

?//SｈowLｏａｄinｇ();?}，

success:functioｎ(dａt(yī)ａ，ｔextSｔatus){

$(".ajａｘ．a(chǎn)ｊaxResult＂).html("");??＄（"itｅm",data）．ｅach（funcｔiｏｎ(i,dｏｍElｅ){?

$("．a(chǎn)jax.ajaxResult")．a(chǎn)ppend("<li>"+$(domEｌe）．children（"titｌｅ＂).teｘｔ()+"＜/lｉ>");??}）;

},?

cｏmplete:fｕｎctｉon（ＸMＬHｔtpRequｅst,tｅｘtStａt(yī)uｓ）{?

//HideＬｏading();

},

errｏｒ:fuｎctiｏｎ()｛??/／請(qǐng)求犯錯(cuò)解決

｝?});這里將顯示首頁(yè)文章列表。

其他jQｕｅrｙ．a(chǎn)jaｘSetup(optionｓ):設(shè)立全局ＡJAX默認(rèn)選項(xiàng)。設(shè)立AJAＸ請(qǐng)求默認(rèn)地址為＂/ｘmｌhttｐ/"，嚴(yán)禁觸發(fā)全局AJAX事件，用PＯST代替默認(rèn)GEＴ方法。其后的ＡＪAX請(qǐng)求不再設(shè)立任何選項(xiàng)參數(shù)。jQｕery代碼:＄.aｊaxSetup({

?url：＂／xｍlｈttｐ／",

ｇlobａl:ｆalsｅ,?

typｅ："POST"

});

$．a(chǎn)ｊax({datａ:ｍyDaｔａ｝);

serialｉｚe()與ｓerｉaliｚeＡrray()seriaｌize()：序列表表格內(nèi)容為字符串。serializeArray():序列化表格元素(類似'.sｅｒiaｌiｚe()'方法)返回ＪSON數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。示例:HTML代碼:<pｉd="results"><b>Results：</b></p＞?<fｏrｍ>?＜ｓelectｎａme="siｎｇｌe">?＜o(jì)ｐｔiｏn>Ｓingle</optioｎ>?<optiｏn＞Siｎgｌe2</optioｎ＞?</ｓelｅｃt>

<ｓelecｔｎaｍe=＂mulｔiple"ｍuｌtiple＝"mｕltｉple">

＜o(jì)ptｉoｎseｌｅcted="ｓelected">Multiple＜/oｐtion＞

<option＞Muｌtiｐle2<／opｔioｎ>?<ｏpｔiｏnsｅlｅcteｄ="selecteｄ">Muｌtipｌe3<／opｔion>

<／seｌｅct><bｒ/>

＜ｉｎpｕttype＝"cheｃkboｘ"name="cheｃk＂ｖalue=＂cheｃk1＂／＞check１??<iｎpuｔtｙpe="checkbox"name=＂cｈｅck"vaｌue＝"ｃheｃｋ２"??

?checkeｄ="cｈecｋed"/>check2

<inpｕttype="radiｏ"ｎame="rａdio"value="raｄio１"??

?checkｅd="checｋed＂/>radiｏ1??＜inpuｔｔｙpe＝"radio"name="radio"vaｌｕe="ｒadｉｏ2"/>ｒadio2

</form＞sｅrializeＡrray（)結(jié)果為：?HYPERLＩNK""\ｏ"查看作者信息"\ｔ"_ｂlank＂

資料

HYＰＥRLINＫ""\o＂給作者發(fā)消息"\ｔ"_blaｎk"

發(fā)消息

HYPERLIＮK"＂\ｌ"quｉckＲeplｙ"＼o"快速回復(fù)主題帖"

回復(fù)

HYPERＬINＫ＂"\l＂qｕickＲeplｙ＂＼ｏ"引用作者回復(fù)＂

引用

HYPERLINK＂＂\o"推薦此內(nèi)容"

推薦

ＨYＰERLINK＂"\o"收藏主題帖"

收藏ＨYPERLIＮＫ""\ｌ"tｏpFloor"\o＂回到頂樓"

頂樓HYPERLIＮK""\o＂查看作者信息"鐘愛(ài)java昵稱:鐘愛(ài)java專家等級(jí):學(xué)員專家分：724可用分等級(jí):佃戶精華:0帖子數(shù)：１84結(jié)帖率：60%注冊(cè)時(shí)間：202３－01-１５16：0２：12發(fā)表于２023－０3-08１4:13:１1第1樓

回復(fù):jＱuｅrｙＡjax應(yīng)用實(shí)例解析大全

?HTＭＬ代碼HYPERＬINＫ"hｔtp://wwｗ.suｎ/forum／thrｅad/22８02．html"\o＂查看源代碼"查看源代碼HYPＥRＬINK"/ｆoruｍ／thrｅaｄ／2２８02.html"\l＂prinｔSｏurｃe"\o"打印"打印001.＜scrｉptsｒc="./js/jｑuｅry.js"ｔype=＂tｅxt/jａvaｓｃｒiｐt"></scｒiｐt＞０02．

０03.<scripｔtype="tｅｘｔ/jａvasｃrｉｐt">0０４.

005．$（docｕmeｎｔ).rｅａdｙ(fｕncｔion(){/／這個(gè)就是jＱueryｒeady，它就像C語(yǔ)言的main所有操作包含在它里面006．

007．$(＂#ｂuttｏn_loｇin"）.mousｅdoｗn（ｆuncｔion（）{0０８.

0０9.logiｎ()；//點(diǎn)擊IＤ為＂buｔtoｎ_ｌogin"的按鈕后觸發(fā)函數(shù)logｉn(）；0１0．

011.});０12.

013．});０14.

01５.fｕnctｉonｌｏgｉｎ(){／/函數(shù)login();016.

０１７.varusｅrｎame＝$(＂#username")．vaｌ（）;//取框中的用戶名0１８.

0１9.varpａsswｏｒｄ＝$("#paｓｓｗord")．vａl(）;//取框中的密碼020.

０2１.$.aｊax（｛//一個(gè)Ajax過(guò)程022.

023.ｔyｐe:"pｏｓｔ"，//以post方式與后臺(tái)溝通０２4.

025.url:＂loｇiｎ.pｈp"，//與此php頁(yè)面溝通02６.

02７.dataTyｐe:＇jｓon',/／從pｈp返回的值以JSON方式解釋02８.

０２9.ｄａt(yī)a:'usernａme='+ｕsｅrname＋'&passｗoｒｄ＝'+pａsswoｒd，／/發(fā)給php的數(shù)據(jù)有兩項(xiàng)，分別是上面?zhèn)鱽?lái)的u和p03０．

０31．sｕｃcess：functiｏn(json)｛/／假如調(diào)用php成功03２.

０3３.//ａｌｅrt(ｊsｏn．uｓeｒnａｍe＋'\ｎ＇+json.passｗord);／／把ｐhp中的返回值（jｓon.userｎame）給ａlｅrt出來(lái)034.

035.＄('＃ｒesult＇)．ｈtml("姓名："+jｓon.ｕsernａme＋＂<BR>密碼:"+json.passwoｒd);//把ｐｈp中的返回值顯示在預(yù)定義的result定位符位置0３6.

037.}０３8.

０3９.｝)；04０.

041.／／$．poｓt（)方式:04２.

043.$（'#tesｔ_post＇).mｏuｓedown(fｕｎcｔion（){044．

045.＄.poｓt(０４６.

０4７．'lｏgin.phｐ'，048.

049.{０5０．

0５1．userｎamｅ:$(＇#uｓｅrnaｍe').val(),０52.

0５3.ｐassｗoｒd:＄('#password')．val（)０5４.

055.},056．

０5７.functioｎ（datａ)//回傳函數(shù)０5８．

05９.｛060.

0６1．varmyjsｏｎ='';06２.

063.eval（'ｍyｊsｏn='+daｔa＋';＇);０64.

065.＄('＃result').html("姓名１:＂+mｙjson．uｓeｒｎａｍｅ＋"<BR>密碼1:"+mｙjson.passｗｏrｄ);066.

0６7．}068.

069.)；070．

0７1．})；072.

0７3．/／＄.gｅｔ()方式:０74．

０75.$('＃test_gｅt').mｏusedown（function()076.

０77．｛078．

０79.$.ｇet（080.

081.'ｌogin．php',０82.

08３.｛08４.

08５.userｎamｅ：$（'#usernａme')．vａl(),０86.

０87．passwｏrｄ:$('＃ｐasswｏrd＇).ｖaｌ（)088.

0８9.},09０.

０91.fuｎｃｔｉon（ｄata)//回傳函數(shù)０92.

０93.{０9４.

095.vaｒmyjson='＇;096.

097.eｖal("myjｓon=＂＋ｄａt(yī)a＋"；");09８．

099.＄('#rｅｓulｔ＇）.html(＂姓名2:"+mｙjsoｎ.usernamｅ+"<BR>密碼2:"+myjｓon.paｓｓword)；１00.

1０１.}102.

103.);104．

105.｝)；1０6.

1０7.｝108.

１０9.</scriｐt>110．

111．

112.

113.<DIＶid＝reｓultstｙle="BＯＲDER-RＩＧHT：red１pxsoliｄ；BORDER-TOP：red１pxsolid;BＡCKGROUND:ｏrange;BORDER-ＬEFT:red1pxsｏｌid;WIDTＨ:300px；BOＲＤER-ＢOＴTOM:red1pxsolid;ＨEIＧＨT：20０px;-mｏｚ-backｇround-clip：boｒder;－mｏz-backgｒoｕnd-ｏriｇｉn:paddｉng；-moｚ-backgrｏｕnd-inline-pｏlicy:ｃoｎtinuｏｕs">

<／ＤIV>11４.

1１５.<FＯRMiｄ＝ｆormｔestactiｏｎ=""meｔhod=ｐost>＜P><ＳPAＮ＞輸入姓名:＜/SPＡN><INPUＴid=uｓernamename=uｓernaｍe><／P>

<Ｐ><SPAN>輸入密碼：＜／ＳPAN><INPUTid=paｓswordnａme=pａｓsword></P＞＜／ＦOＲM>116.

１17.<BUTTONid=buttoｎ_logiｎ>ajax提交</BUTTＯN>1１8．

119.<BUTTＯNid＝ｔｅst_posｔ＞pｏst提交</BＵTTON>1２0.

121.<BUTTONid=test_get>get提交</BUTTOＮ>

Logiｎ.ｐhp

ＰHＰ代碼ＨＹPERＬIＮK"ｈttｐ://wwｗ.sunｘin.ｏｒg／foruｍ／thread/２2802．html"＼ｌ＂viewSourｃe"\o"查看源代碼"查看源代碼ＨYＰEＲＬIＮK"hｔtｐ://www.sunｘｉ/forum/ｔhrｅaｄ/22802．ｈtｍl"\l"ｐｒintSourcｅ"\ｏ"打印"打印1.$_ＲEQUEST［＇userｎame＇］，'password'=>＄＿ＲＥQＵEST['password']))；2.

3.?＞

HYPERLＩNK""＼ｏ"查看作者信息"\t"_ｂlaｎｋ"

資料

ＨＹPERＬIＮK""\o"給作者發(fā)消息"＼t"_blank"

發(fā)消息

ＨYPＥRLＩNＫ""\l＂quｉｃkＲeｐly"\o"快速回復(fù)主題帖"

回復(fù)

HYPERＬINＫ""\o"推薦此內(nèi)容＂

推薦

ＨYPＥRＬIＮK""\o＂收藏主題帖"

收藏HYPERＬＩNK""＼l＂topFloor"\ｏ"回到頂樓"

頂樓ＨＹPERＬINK"＂\o"查看作者信息"\t"_blank＂我的天地昵稱:我的天地專家等級(jí)：學(xué)員專家分：8４０可用分等級(jí)：短工精華：0帖子數(shù)：２04結(jié)帖率:４6%注冊(cè)時(shí)間：２02３－01－２510:49:０５發(fā)表于20２3-03-0815：31：43第２樓

回復(fù):ｊQueryAjａｘ應(yīng)用實(shí)例解析大全

?ｊＱｕeryAｊax實(shí)例演示

HTMＬ代碼HYPEＲLINK"http://wｗw．ｓunxiｎ．org/forum/tｈｒeaｄ/2２802.hｔｍl"＼l＂viewＳourcｅ＂\o"查看源代碼"查看源代碼HＹＰERＬINK"hｔtp:／／www.sunxiｎ.org/forum/thｒeａd/22802.hｔｍl"\l＂ｐrintSource"＼ｏ＂打印"打印0１．<scriｐtlａngｕage=＂ｊavaｓcrｉpt"ｓrｃ＝＂..／lｉｂ/ｊqueｒy.ｊｓ＂></scriｐｔ>02.<scｒiｐtｌaｎguage＝"jaｖａscriｐt＂>０３.

04.$(docuｍent).rｅady（ｆunctiｏn()05.{０6.

$('#send＿ajax')．click(fuｎction(){07.

varpａraｍs=$（'ｉｎput').seriaｌｉze()；//序列化表單的值08.

$.ａjaｘ（{０9．

url：＇aｊaｘ_ｊson．ｐｈp',／/后臺(tái)解決程序1０．

tｙpe:'pｏst',

／/數(shù)據(jù)發(fā)送方式1１.

datａTyｐe:'ｊson',

/／接受數(shù)據(jù)格式12.

data:ｐarams，

/／要傳遞的數(shù)據(jù)１３.

sucｃｅss:ｕpdatｅ_ｐaｇe//回傳函數(shù)(這里是函數(shù)名）14.

});1５．

});１6.

17./／$．posｔ()方式：18.$('#teｓt_pｏst'）.ｃlick(ｆunｃtｉoｎ(){１9．

$.poｓｔ(20.

'ａｊａx_jsoｎ.ｐhp＇,21.

{２2.

usernａme：$（'＃inpuｔ１'）.ｖal(),2３．

age:$（'#iｎput2＇）．ｖａl（),2４.

ｓex:＄('＃iｎｐut３'）.val(）,25.

jｏb:$(＇#inｐut４').val()26．

｝,27.

functｉon(dａｔａ)//回傳函數(shù)28.

{2９.

vaｒmｙjsｏn='';３0.

ｅvａl(＇mｙjｓon＝'+ｄata＋＇;＇);31．

$(＇#reｓuｌt')．html("姓名:＂+my