jQuery中Ajax的get、post等方法詳解
來(lái)源:易賢網(wǎng) 閱讀:1373 次 日期:2015-03-25 11:20:22
溫馨提示:易賢網(wǎng)小編為您整理了“jQuery中Ajax的get、post等方法詳解”,方便廣大網(wǎng)友查閱!

前面我們講述了jQuery中ajax的load()方法,小伙伴們反應(yīng)非常好,今天我們就來(lái)講解下jQuery中Ajax的get、post等方法,希望大家同樣能夠喜歡。

load()方法通常用來(lái)從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件,然而這并不能體現(xiàn)ajax的全部?jī)r(jià)值。

在項(xiàng)目中,如果需要傳遞一些參數(shù)給服務(wù)器中的頁(yè)面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法)

$.get()方法使用GET方式來(lái)進(jìn)行異步請(qǐng)求。結(jié)構(gòu)為:$.get(url [, data] [, callback] [, type])

$.get()方法參數(shù)解釋如下:

參數(shù)名稱類型說(shuō)明

urlString請(qǐng)求的HTML頁(yè)的URL地址

data(可選)Object發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求URL中

callback(可選)Function載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才調(diào)用該方法)自動(dòng)將請(qǐng)求結(jié)果和狀態(tài)傳遞給該方法

type(可選)String服務(wù)器端返回內(nèi)容的格式,包括xml、html、script、json、text和_default

$.post()方法。

$.post()和$.get()方法的結(jié)構(gòu)和使用方式相同,不過(guò)它們之間仍然有以下區(qū)別:

GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞,而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器。

GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制(通常不大于2KB),而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多(理論上不受限制)

GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái),因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數(shù)據(jù),例如賬號(hào)和密碼等。在某種情況下,GET方式會(huì)帶來(lái)嚴(yán)重的安全性問(wèn)題,而POST方式相對(duì)來(lái)說(shuō)可以避免這些問(wèn)題

GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端的獲取也不相同。

$.getScript():jQuery提供了此方法來(lái)直接加載js文件,與加載一個(gè)HTML片段一樣簡(jiǎn)單方便,并且不需要對(duì)JavaScript文件進(jìn)行處理,JavaScript文件會(huì)自動(dòng)執(zhí)行。

jQuery代碼如下:

代碼如下:

$(function () {

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

$.getScript("test.js");

});

})

與其他ajax方法一樣,$.getScript()方法也有回調(diào)函數(shù),它會(huì)在JavaScript文件載入成功后運(yùn)行。

例如:想載入jQuery官方顏色動(dòng)畫插件(jquery.color.js),成功后給元素綁定顏色變化動(dòng)畫:

代碼如下:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

.block{width:80px;height:80px;background:#DDD;}

</style>

<title></title>

</head>

<body>

<button id="go">運(yùn)行</button>

<div class="block"></div>

</body>

<script type="text/javascript">

$(function () {

$.getScript("jquery.color.js", function () {

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

$(".block").animate({backgroundColor: 'pink'}, 1000)

.animate({backgroundColor: 'blue'}, 1000);

});

})

})

</script>

</html>

$.getJson():該方法用于加載JSON文件,用法與$.getScript()相同。

代碼如下:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="../../js/jquery-2.1.3.js"></script>

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

<title></title>

</head>

<body>

<br/>

<p>

<input type="button" id="send" value="加載"/>

</p>

<div class="comment">已有評(píng)論:</div>

<div id="resText" >

</div>

</body>

<script type="text/javascript">

$(function () {

$('#send').click(function() {

$.getJSON('test.json', function(data) {

$('#resText').empty();

var html = '';

$.each( data , function(commentIndex, comment) {

html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';

})

$('#resText').html(html);

})

})

})

</script>

</html>

test.json文件為:

代碼如下:

[

{

"username": "張三",

"content": "沙發(fā)."

},

{

"username": "李四",

"content": "板凳."

},

{

"username": "王五",

"content": "地板."

}

]

使用JSONP形式的回調(diào)函數(shù)來(lái)加載其他網(wǎng)站的JSON數(shù)據(jù)。例如:

代碼如下:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="../../js/jquery-2.1.3.js"></script>

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.para {

width:100px;

height:100px;

margin:5px;

border:0;

}

</style>

<title></title>

</head>

<body>

<p>

<input type="button" id="send" value="加載"/>

</p>

<div id="resText" >

</div>

</body>

<script type="text/javascript">

$(function () {

$('#send').click(function() {

$.getJSON("=?",

function(data){

$.each(data.items, function( i,item ){

$("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");

if ( i == 3 ) {

return false;

}

});

}

);

})

})

/**

* JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議,它允許在服務(wù)器端集成Script tags返回至客戶端,通過(guò)JavaScript Callback的形式實(shí)現(xiàn)跨域訪問(wèn)

* 上述的url地址并不能請(qǐng)求到數(shù)據(jù),僅用作說(shuō)明。

* */

</script>

</html>

注意:

jQuery將自動(dòng)把URL里的回調(diào)函數(shù),例如"url?callback=?"中的后一個(gè)”?“替換為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。

JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議,它允許在服務(wù)器端集成Script tags返回至客戶端,通過(guò)JavaScript Callback的形式實(shí)現(xiàn)跨域訪問(wèn)。由于JSON只是一種含有簡(jiǎn)單括號(hào)結(jié)構(gòu)的純文本,因此許多通道都可以交換JSON消息。而由于同源策略的限制,開發(fā)人員不能在于外部服務(wù)器進(jìn)行通信的時(shí)候使用XMLHttpRequest。而JSONP是一種可以繞過(guò)同源策略的方法,即通過(guò)使用JSON和<script>標(biāo)記相結(jié)合的方法,從服務(wù)器端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JavaScript對(duì)象。目前JSONP已經(jīng)成為各大公司的Web應(yīng)用程序跨域首選。

$.ajax()方法時(shí)jQuery最底層的ajax實(shí)現(xiàn)。它的結(jié)構(gòu)為:

$.ajax(options).該方法只有一個(gè)參數(shù),但在這個(gè)對(duì)象里包含了$.ajax()方法所需要的請(qǐng)求設(shè)置以及回調(diào)函數(shù)等信息,參數(shù)以key/value的形式存在,所有參數(shù)都是可選的,

常用參數(shù)列表為:

參數(shù)名稱類型說(shuō)明

urlString(默認(rèn)為當(dāng)前頁(yè)地址)發(fā)送請(qǐng)求的地址

typeString請(qǐng)求方式(post或get)默認(rèn)為get。注意其他HTTP請(qǐng)求方法,如PUT何DELETE也可以使用,但僅部分瀏覽器支持

timeoutNumber設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置

dataObject或String發(fā)送到服務(wù)器的數(shù)據(jù)。如果不是字符串,將自動(dòng)轉(zhuǎn)換為字符串格式。GET請(qǐng)求中將附加在url后。防止這種自動(dòng)轉(zhuǎn)換,可以查看processData選項(xiàng)。對(duì)象必須為key/value格式,例如{foo1:"bar1", foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組,jQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。例如{foo:["bar1", "bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2

dataTypeString

預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery將自動(dòng)根據(jù)HTTP包MIME信息返回responseXML或responseText,并作為回調(diào)函數(shù)參數(shù)傳遞??捎玫念愋腿缦?。

xml:返回XML文檔,可用jQuery處理

html:返回純文本HTML信息;包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行

script:返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下),所有POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求。

json:返回JSON數(shù)據(jù)

jsonp:JSONP格式。使用JSONP形式調(diào)用函數(shù)時(shí),例如myurl?callback=?,jQuery將自動(dòng)替換后一個(gè)”?“為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。

text:返回純文本字符串

beforeSendFunction

發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù),例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請(qǐng)求。XMLHttpRequest對(duì)象是唯一的參數(shù)。

function(XMLHttpRequest) {

  this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

completeFunction

請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)(請(qǐng)求成功或失敗時(shí)均調(diào)用)

參數(shù):XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。

function(XMLHttpRequest, textStatue){

  this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

successFunction

請(qǐng)求成功后調(diào)用的回調(diào)函數(shù),有兩個(gè)參數(shù)。

(1)由服務(wù)器返回,并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)

(2)描述狀態(tài)的字符串

function(data, textStatus) {

  //data可能是xmlDoc、jsonObj、html、text等

  this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

errorFunction

請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù),即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。

Ajax事件函數(shù)如下:

function(XMLHttpRequest, textStatus, errorThrown) {

  //通常情況下textStatus和errorThrown只有其中一個(gè)包含信息

  this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

globalBoolean默認(rèn)為true。表示是否觸發(fā)全局Ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局Ajax事件,AjaxStart或AjaxStop

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:jQuery中Ajax的get、post等方法詳解
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)