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ù)名稱 | 類(lèi)型 | 說(shuō)明 |
| url | String | 請(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)畫(huà)插件(jquery.color.js)，成功后給元素綁定顏色變化動(dòng)畫(huà)：
<!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消息。而由于同源策略的限制，開(kāi)發(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ù)名稱 | 類(lèi)型 | 說(shuō)明 |
| url | String | (默認(rèn)為當(dāng)前頁(yè)地址)發(fā)送請(qǐng)求的地址 |
| type | String | 請(qǐng)求方式(post或get)默認(rèn)為get。注意其他HTTP請(qǐng)求方法，如PUT何DELETE也可以使用，但僅部分瀏覽器支持 |
| timeout | Number | 設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置 |
| data | Object或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 |
| dataType | String |
預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型。如果不指定，jQuery將自動(dòng)根據(jù)HTTP包MIME信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞?？捎玫念?lèi)型如下。 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：返回純文本字符串 |
| beforeSend | Function |
發(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ù) } |
| complete | Function |
請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)(請(qǐng)求成功或失敗時(shí)均調(diào)用) 參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類(lèi)型的字符串。 function(XMLHttpRequest, textStatue){ this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù) } |
| success | Function |
請(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ù) } |
| error | Function |
請(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ù) } |
| global | Boolean | 默認(rèn)為true。表示是否觸發(fā)全局Ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局Ajax事件，AjaxStart或AjaxStop可用于控制各種Ajax事件 |
- jQuery中ajax的load()與post()方法實(shí)例詳解
- jQuery中ajax - get() 方法實(shí)例詳解
- jquery中g(shù)et,post和ajax方法的使用小結(jié)
- jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫(xiě)法
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
- jQuery中ajax的get()方法用法實(shí)例
- jQuery中ajax的load()方法用法實(shí)例
- 詳談jQuery Ajax(load,post,get,ajax)的用法
相關(guān)文章
jquery實(shí)現(xiàn)對(duì)聯(lián)廣告的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)對(duì)聯(lián)廣告的方法,以一個(gè)完整實(shí)例形式詳細(xì)分析了jQuery對(duì)聯(lián)廣告的樣式與功能實(shí)現(xiàn)方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02
在jquery中處理帶有命名空間的XML數(shù)據(jù)
如果你在做AJAX應(yīng)用，則你可能經(jīng)常會(huì)用到j(luò)query（或者其他框架）處理服務(wù)返回的數(shù)據(jù)。如果用Jquery處理Json格式，將是相當(dāng)方便的。2011-06-06
下面小編就為大家?guī)?lái)一篇淺談jQuery 選擇器和dom操作。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JQuery動(dòng)畫(huà)與特效實(shí)例分析
這篇文章主要介紹了JQuery動(dòng)畫(huà)與特效的用法,實(shí)例分析了顯示與隱藏、滑動(dòng)、淡入淡出及自定義動(dòng)畫(huà)的使用技巧,需要的朋友可以參考下2015-02-02
jquery 插件開(kāi)發(fā) extjs中的extend用法小結(jié)
在jquery中，extend其實(shí)在做插件時(shí)還是用的比較多的，今天同時(shí)小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下2013-01-01
jQuery form插件的使用之處理server返回的JSON， XML，HTML數(shù)據(jù)
這篇文章主要介紹了jQuery form插件的使用之處理server返回的JSON， XML，HTML數(shù)據(jù) 的相關(guān)資料,需要的朋友可以參考下2016-01-01
Jquery通過(guò)Ajax方式來(lái)提交Form表單的具體實(shí)現(xiàn)
提交Form表單的方法有很多，在本文為大家介紹下Jquery通過(guò)Ajax方式是如何提交Form表單的2013-11-11
Jquery Ajax 學(xué)習(xí)實(shí)例2 向頁(yè)面發(fā)出請(qǐng)求 返回JSon格式數(shù)據(jù)
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用2010-03-03
asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
這篇文章主要介紹了asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法,結(jié)合實(shí)例形式分析了jquery.form.js前臺(tái)異步提交圖片與asp.net后臺(tái)處理的相關(guān)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery編寫(xiě)QQ簡(jiǎn)易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08