jQuery的ajax詳解

jQuery內部也封裝了對原生ajax請求的方法设凹,可以很方便我們的對后臺異步請求處理。

$.get()方法

語法:jQuery.get( url [, data ] [, success ] [, dataType ] )

  • url 請求的后臺地址
  • data 傳遞的參數(shù)
  • success 成功的回調, function(PlainObject data, String textStatus, jqXHR jqXHR )
  • dataType 預期后臺返回數(shù)據(jù)的類型兢榨,默認會自動智能判斷(xml, json, script, text, html)
$.get('/user.json', function(data) {
  console.log(data);
});

$.get('/user.json', 'id=1', function (data, status, jsXHR) {
  console.log(data.id);
}, 'json');

$.post()方法

語法: jQuery.post( url [, data ] [, success ] [, dataType ] )

用法跟get基本一致。列子:

$.post('/api/user', {id: 3, name: 234}, function(data, status, jsXHR) {
  console.log(data);
});

$.ajax()方法

語法1: jQuery.ajax( [settings ] )

settings 是一個普通的對象全跨』嘀可以有如下設置:

  • async 類型:Boolean

默認值: true。默認設置下豺裆,所有請求均為異步請求拒秘。如果需要發(fā)送同步請求,請將此選項設置為 false臭猜。

注意躺酒,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執(zhí)行蔑歌。

  • beforeSend(XHR) 類型:Function

發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)羹应,如添加自定義 HTTP 頭。

XMLHttpRequest 對象是唯一的參數(shù)次屠。

這是一個 Ajax 事件园匹。如果返回 false 可以取消本次 ajax 請求。

  • cache 類型:Boolean

默認值: true劫灶,dataType 為 script 和 jsonp 時默認為 false裸违。設置為 false 將不緩存此頁面。

  • contentType 類型:String

默認值: "application/x-www-form-urlencoded"本昏。發(fā)送信息至服務器時內容編碼類型累颂。

  • data 類型:String

發(fā)送到服務器的數(shù)據(jù)。將自動轉換為請求字符串格式凛俱。GET 請求中將附加在 URL 后紊馏。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式蒲犬。如果為數(shù)組朱监,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'原叮。

  • dataType 類型:String
    預期服務器返回的數(shù)據(jù)類型赫编。 (xml巡蘸、html、script擂送、json悦荒、jsonp、text)嘹吨。jq會將自動根據(jù) HTTP 包 MIME 信息來智能判斷搬味,比如 XML MIME 類型就被識別為 XML。

  • error 類型:Function

默認值: 自動判斷 (xml 或 html)蟀拷。請求失敗時調用此函數(shù)碰纬。

有以下三個參數(shù):XMLHttpRequest 對象、錯誤信息问芬、(可選)捕獲的異常對象悦析。

如果發(fā)生了錯誤,錯誤信息(第二個參數(shù))除了得到 null 之外此衅,還可能是 "timeout", "error", "notmodified" 和 "parsererror"强戴。

  • success 類型:Function

請求成功后的回調函數(shù)。

參數(shù):由服務器返回挡鞍,并根據(jù) dataType 參數(shù)進行處理后的數(shù)據(jù)酌泰;描述狀態(tài)的字符串。

這是一個 Ajax 事件匕累。

  • type 類型:String

默認值: "GET")。請求方式 ("POST" 或 "GET")默伍, 默認為 "GET"欢嘿。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用也糊,但僅部分瀏覽器支持炼蹦。

  • url 類型:String

默認值: 當前頁地址。發(fā)送請求的地址狸剃。

  • jsonp 類型:String

在一個 jsonp 請求中重寫回調函數(shù)的名字掐隐。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給服務器钞馁。

  • jsonpCallback 類型:String

為 jsonp 請求指定一個回調函數(shù)名虑省。這個值將用來取代 jQuery 自動生成的隨機函數(shù)名。這主要用來讓 jQuery 生成度獨特的函數(shù)名僧凰,這樣管理請求更容易探颈,也能方便地提供回調函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候训措,指定這個回調函數(shù)名伪节。

語法2:jQuery.ajax( url [, settings ] )

$.ajax({
  url: 'user.json',
  data: 'id=3',
  type: 'GET',
  success: function(data) {
    console.log(data);
  }
});

$.getJSON()

語法: jQuery.getJSON( url [, data ] [, success ] )

用法類似于get光羞,但是返回的數(shù)據(jù)類型自動轉換為json對象。

此方法怀大,支持JSONP的調用纱兑。如果url中包含了callback=?或者后臺要求的callback參數(shù),那么此方法自動轉換成jsonp的調用模式化借。

$.getJSON('user.json', function(data) {
  console.log(data.id);
});

jQuery.getScript()方法

執(zhí)行后臺的請求潜慎,并下載js腳本,下載完成后屏鳍,自動執(zhí)行勘纯。
語法: jQuery.getScript( url [, success ] )

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

load()方法

從后臺下載html內容,下載完成后替換到選擇元素的內部钓瞭。

語法:$(selector).load( url [, data ] [, complete ] )

$('.box').load('/user/list', {}, function(data) {});
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末驳遵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子山涡,更是在濱河造成了極大的恐慌堤结,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸭丛,死亡現(xiàn)場離奇詭異竞穷,居然都是意外死亡,警方通過查閱死者的電腦和手機鳞溉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門瘾带,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人熟菲,你說我怎么就攤上這事看政。” “怎么了抄罕?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵允蚣,是天一觀的道長。 經(jīng)常有香客問我呆贿,道長嚷兔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任做入,我火速辦了婚禮冒晰,結果婚禮上,老公的妹妹穿的比我還像新娘竟块。我一直安慰自己翩剪,他們只是感情好,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布彩郊。 她就那樣靜靜地躺著前弯,像睡著了一般蚪缀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上恕出,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天询枚,我揣著相機與錄音,去河邊找鬼浙巫。 笑死金蜀,一個胖子當著我的面吹牛,可吹牛的內容都是我干的的畴。 我是一名探鬼主播渊抄,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丧裁!你這毒婦竟也來了护桦?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤煎娇,失蹤者是張志新(化名)和其女友劉穎二庵,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缓呛,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡催享,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哟绊。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片因妙。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖票髓,靈堂內的尸體忽然破棺而出攀涵,到底是詐尸還是另有隱情,我是刑警寧澤炬称,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站涡拘,受9級特大地震影響玲躯,放射性物質發(fā)生泄漏。R本人自食惡果不足惜鳄乏,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一跷车、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧橱野,春花似錦朽缴、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茅郎。三九已至,卻和暖如春或渤,著一層夾襖步出監(jiān)牢的瞬間系冗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工薪鹦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掌敬,地道東北人。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓池磁,卻偏偏與公主長得像奔害,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子地熄,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內容