萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery中Ajax的get、post等方法詳解
jQuery中Ajax的get、post等方法詳解
前面我們講述了jQuery中ajax的load（）方法，小伙伴們反應非常好，今天我們就來講解下jQuery中Ajax的get、post等方法，希望大家同樣能夠喜歡。
load()方法通常用來從Web服務器上獲取靜態的數據文件，然而這並不能體現ajax的全部價值。
在項目中，如果需要傳遞一些參數給服務器中的頁面，那麼可以使用$.get()或者$.post()方法(或者是$.ajax()方法)
$.get()方法使用GET方式來進行異步請求。結構為：$.get(url [, data] [, callback] [, type])
$.get()方法參數解釋如下:
參數名稱 類型 說明 url String 請求的HTML頁的URL地址 data(可選) Object 發送至服務器的key/value數據會作為QueryString附加到請求URL中 callback(可選) Function 載入成功時回調函數(只有當Response的返回狀態是success才調用該方法)自動將請求結果和狀態傳遞給該方法 type(可選) String 服務器端返回內容的格式，包括xml、html、script、json、text和_default
$.post()方法。
$.post()和$.get()方法的結構和使用方式相同，不過它們之間仍然有以下區別：
GET請求會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web服務器。
GET方式對傳輸的數據有大小限制(通常不大於2KB)，而使用POST方式傳遞的數據量要比GET方式大得多(理論上不受限制)
GET方式請求的數據會被浏覽器緩存起來，因此其他人就可以從浏覽器的歷史記錄中讀取到這些數據，例如賬號和密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題，而POST方式相對來說可以避免這些問題
GET方式和POST方式傳遞的數據在服務器端的獲取也不相同。
$.getScript()：jQuery提供了此方法來直接加載js文件，與加載一個HTML片段一樣簡單方便，並且不需要對JavaScript文件進行處理，JavaScript文件會自動執行。
jQuery代碼如下：
代碼如下:
$(function () {
$("#send").click(function () {
$.getScript("test.js");
});
})
與其他ajax方法一樣，$.getScript()方法也有回調函數，它會在JavaScript文件載入成功後運行。
例如：想載入jQuery官方顏色動畫插件(jquery.color.js)，成功後給元素綁定顏色變化動畫：
代碼如下:
<!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">運行</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">已有評論：</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": "沙發."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
使用JSONP形式的回調函數來加載其他網站的JSON數據。例如：
代碼如下:
<!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("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
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)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過JavaScript Callback的形式實現跨域訪問
* 上述的url地址並不能請求到數據，僅用作說明。
* */
</script>
</html>
注意：
jQuery將自動把URL裡的回調函數，例如"url?callback=?"中的後一個”?“替換為正確的函數名，以執行回調函數。
JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過JavaScript Callback的形式實現跨域訪問。由於JSON只是一種含有簡單括號結構的純文本，因此許多通道都可以交換JSON消息。而由於同源策略的限制，開發人員不能在於外部服務器進行通信的時候使用XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用JSON和<script>標記相結合的方法，從服務器端直接返回可執行的JavaScript函數調用或者JavaScript對象。目前JSONP已經成為各大公司的Web應用程序跨域首選。
$.ajax()方法時jQuery最底層的ajax實現。它的結構為:
$.ajax(options).該方法只有一個參數，但在這個對象裡包含了$.aja
- 上一頁:js動態切換圖片的方法
- 下一頁:js+css實現tab菜單切換效果的方法
