jQuery中的ajax應(yīng)用

jQuery對ajax進(jìn)行了3層封裝拗窃。最底層為$.ajax()方法庆猫、第2層為load(),$get(),$post()方法凸丸、最高層為$.getScript(),$.getJSON()方法广匙。

load方法通常用于從web服務(wù)器中獲取靜態(tài)的數(shù)據(jù)文件,主要功能是載入遠(yuǎn)程HTML代碼并插入DOM中董栽,結(jié)構(gòu)為

load(url, [, data] [, callback])

url為請求HTML頁面的URL地址码倦,data為發(fā)送給服務(wù)器的key/value數(shù)據(jù),callbakc為請求完成時(shí)的回調(diào)函數(shù)锭碳。

這個(gè)方法可以這么用:

$("#resText").load("test.html");

調(diào)用上面的代碼后袁稽,test.html頁面就會被載入到DOM元素中。

在實(shí)際開發(fā)中最常用的是get和post方法擒抛,這兩個(gè)方法是jQuery的全局函數(shù)运提,之前講的所以方法都是對jQuery對象進(jìn)行操作蝗柔。

$.get()方法使用GET方式進(jìn)行異步請求闻葵,結(jié)構(gòu)為:

$.get(url [, data] [, callback] [, type]);

url為請求頁面的url地址民泵,data為發(fā)送至服務(wù)器的key/value數(shù)據(jù),callback為載入成功時(shí)的回調(diào)函數(shù)槽畔,type為服務(wù)器端返回內(nèi)容的格式栈妆。

其它參數(shù)都是很簡單的,主要是看一下回調(diào)函數(shù)有哪些參數(shù):

function(data, textStatus){
  //data : 返回的內(nèi)容厢钧,可以是xml, json, html片段等
  //textStatus : 請求狀態(tài): success, error, notmodified, timeout4種
}

$.get()和$.post()只有等textStatus狀態(tài)為success時(shí)回調(diào)函數(shù)才會被調(diào)用鳞尔。

如果返回的是xml文檔,那么可以用jquery中的attr,find filter方法進(jìn)行處理早直。

$post()方法實(shí)際上跟$get()方法的使用方法差不多寥假,只是背后的原理不同。

接下來講一下jQuery提供的最高層方法getScript和getJSON方法霞扬。

有時(shí)候糕韧,在頁面初次加載的時(shí)候載入所有的js文件是沒有必要的,我們可以動態(tài)引入js文件:

$(document.createElement("script")).attr("src", "test.js").appendTo("head");//方法1
$("<script type='text/javascript' src='test.js' />").appendTo("head");//方法2

$(function(){
  $("#send").click(function(){
    $.getScript("test.js");
  });
}).ready();//方法3

$.getScript方法也有回調(diào)函數(shù)喻圃,在js文件成功加載之后調(diào)用萤彩。方法3加載完JS文件之后,js文件會自動執(zhí)行斧拍。

$.getJSON方法的使用方式和getScript一樣雀扶,但是前者的回調(diào)函數(shù)一般需要寫明要如何處理回載的JSON數(shù)據(jù)∷列冢回調(diào)函數(shù)有一個(gè)data的參數(shù)愚墓,表示JSON對象。

要遍歷JSON對象可以使用jQuery中的$.each方法昂勉,這個(gè)方法用于遍歷對象和數(shù)組浪册。

$.each方法第1個(gè)參數(shù)為一個(gè)數(shù)組或一個(gè)對象,第2個(gè)參數(shù)為一個(gè)回調(diào)函數(shù)硼啤,回調(diào)函數(shù)擁有2個(gè)參數(shù):第1個(gè)為對象的成員或數(shù)組的索引议经,第2個(gè)為對應(yīng)變量或內(nèi)容。如果回調(diào)函數(shù)中返回false那么遍歷將結(jié)束谴返。

將下來講最底層的方法$.ajax方法煞肾,jQuery中所有的ajax方法都是通過這個(gè)方法實(shí)現(xiàn)的,也就是說這個(gè)方法可以替換之前講的所有ajax方法嗓袱。

它的結(jié)構(gòu)為:

$.ajax(option);

這個(gè)方法只有一個(gè)參數(shù)籍救,參數(shù)是一個(gè)對象,這個(gè)對象包含了所需要的請求設(shè)置渠抹,以及回調(diào)函數(shù)等信息蝙昙,參數(shù)以key/value的形式存在闪萄,所有的參數(shù)都是可選的。重要的參數(shù)有url,type,complete,success等奇颠。

在使用jQuery之前败去,網(wǎng)頁異步提交表單的時(shí)候只能把每個(gè)表單元素的值一個(gè)一個(gè)讀出來然后格式化后發(fā)送到服務(wù)器,現(xiàn)在可以使用jQuery中的serialize方法烈拒。

    $("#send").click(function(){
        $.get("get1.php", $("#form1").serialize(), function(data, textStatus){
            $("#resText").html(data);
        });
    });

調(diào)用這個(gè)方法就相當(dāng)表將表格里的數(shù)據(jù)用key/value方法發(fā)送給服務(wù)器端了圆裕。如果修改了表單,增加了表單元素荆几,那么也不用將這段代碼進(jìn)行修改吓妆。

jQuery還為ajax請求設(shè)置了全局事件。$.ajaxStart()和$.ajaxStop()吨铸,分別在網(wǎng)頁發(fā)起ajax請求和ajax請求完成時(shí)調(diào)用行拢,這2個(gè)函數(shù)的參數(shù)為一個(gè)回調(diào)函數(shù)。

關(guān)于jQuery暫時(shí)先學(xué)習(xí)到這里诞吱,我認(rèn)為寫這些文章跟寫程序一樣舟奠,從來不會完成,應(yīng)該要一直更新狐胎,目前jQuery學(xué)習(xí)告一段落鸭栖,如果以后的項(xiàng)目中還需要學(xué)習(xí)關(guān)于jQuery新的知識,我一定再把學(xué)習(xí)心得寫上來握巢。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末晕鹊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子暴浦,更是在濱河造成了極大的恐慌溅话,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件歌焦,死亡現(xiàn)場離奇詭異飞几,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)独撇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進(jìn)店門屑墨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纷铣,你說我怎么就攤上這事卵史。” “怎么了搜立?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵以躯,是天一觀的道長。 經(jīng)常有香客問我,道長忧设,這世上最難降的妖魔是什么刁标? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮址晕,結(jié)果婚禮上膀懈,老公的妹妹穿的比我還像新娘。我一直安慰自己斩箫,他們只是感情好吏砂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著乘客,像睡著了一般。 火紅的嫁衣襯著肌膚如雪淀歇。 梳的紋絲不亂的頭發(fā)上易核,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天,我揣著相機(jī)與錄音浪默,去河邊找鬼牡直。 笑死,一個(gè)胖子當(dāng)著我的面吹牛纳决,可吹牛的內(nèi)容都是我干的碰逸。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阔加,長吁一口氣:“原來是場噩夢啊……” “哼饵史!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起胜榔,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤胳喷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后夭织,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吭露,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年尊惰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了讲竿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,769評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡弄屡,死狀恐怖题禀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情琢岩,我是刑警寧澤投剥,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站担孔,受9級特大地震影響江锨,放射性物質(zhì)發(fā)生泄漏吃警。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一啄育、第九天 我趴在偏房一處隱蔽的房頂上張望酌心。 院中可真熱鬧,春花似錦挑豌、人聲如沸安券。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侯勉。三九已至,卻和暖如春铝阐,著一層夾襖步出監(jiān)牢的瞬間址貌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工徘键, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留练对,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓吹害,卻偏偏與公主長得像螟凭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子它呀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容