快捷導(dǎo)航

jQuery 學(xué)習(xí)第五課 Ajax 使用說(shuō)明

更新時(shí)間：2010年05月17日 22:38:19 作者：

關(guān)于ajax早已不是新鮮話(huà)題，而jQuery使ajax變得無(wú)比簡(jiǎn)單。

jQuery提供了若干個(gè)ajax函數(shù)，他們大同小異，只是為了處理不同類(lèi)型的數(shù)據(jù)而分開(kāi)來(lái)。最簡(jiǎn)單的是get(url,parameters,callback),這個(gè)函數(shù)發(fā)起一個(gè)GET請(qǐng)求，將服務(wù)器返回的數(shù)據(jù)傳遞給callback處理。下面的例子實(shí)現(xiàn)了當(dāng)鼠標(biāo)懸浮在超鏈接上的時(shí)候，就發(fā)起一個(gè)ajax請(qǐng)求，從服務(wù)器端返回關(guān)于此超鏈接的更多介紹的效果。先看服務(wù)器端代碼，新建一個(gè)ajaxload.ashx,僅作為示例，獲得查詢(xún)參數(shù)為word的值，并返回：

復(fù)制代碼代碼如下:

 
<%@ WebHandler Language="C#" Class="ajaxload" %> 
using System; 
using System.Web; 
public class ajaxload : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string word = context.Request.Params["word"]; 
context.Response.Write(string.Format("<p style='color:red;'>More intorduction of {0} is here....</p>",word)); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

前臺(tái)代碼如下：

復(fù)制代碼代碼如下:

 
<head> 
<title>Ajax Text</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('a').hover(function(event) { 
$.get('ajaxload.ashx', { word: $(event.target).html() }, function(data) { 
$('#result').html(data); 
}); 
}, function() { 
$('#result').html(""); 
}); 
}); 
</script> 
</head> 
<body> 
<a href="javascript:void(0)">China</a><br /> 
<a href="javascript:void(0)">USA</a><br /> 
<a href="javascript:void(0)">Japan</a><br /> 
<a href="javascript:void(0)">中 國(guó)</a><br /> 
<div id="result"> 
</div> 
</body> 

將鼠標(biāo)依次滑過(guò)Japan和中國(guó)，在firebug中可以清楚的看到發(fā)起了兩次get請(qǐng)求。jquery將參數(shù)編碼后傳遞給服務(wù)器。在jQuery的幫助下，ajax如此簡(jiǎn)單。

在此例中，服務(wù)器端返回了一個(gè)html片段，前臺(tái)所作的工作就是把這個(gè)html片段插入到頁(yè)面中去，實(shí)際上，服務(wù)器端返回的可以是任何格式的數(shù)據(jù)，只要在前臺(tái)做相應(yīng)的處理即可。在各種數(shù)據(jù)格式中，尤為常用的是JSON格式。關(guān)于JSON格式本身，本文不多做介紹。簡(jiǎn)單說(shuō)，JSON格式非常類(lèi)似于javascript中的對(duì)象字面量。{}表示一個(gè)對(duì)象，[]表示一個(gè)數(shù)組。

下面來(lái)實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)下拉菜單。先看下最終效果：

這是一個(gè)捆綁銷(xiāo)售商品選擇器，先選擇第一個(gè)屬性Game，再選擇Server，最后選擇Amount。服務(wù)器端如何從數(shù)據(jù)庫(kù)查找到合適的數(shù)據(jù)并且如何將其序列化成JSON數(shù)據(jù)不是本文討論的重點(diǎn)。服務(wù)器端能響應(yīng)如下請(qǐng)求，返回的數(shù)據(jù)也能看到，這些是JSON的典型格式：

第一個(gè)請(qǐng)求返回Game的列表，第二個(gè)請(qǐng)求返回Server的列表，第三個(gè)稍微復(fù)雜一點(diǎn)，返回了很多信息，其中DisplayName是用來(lái)顯示在列表中的，ID是列表的value值，其余的沒(méi)有用到。例如：

復(fù)制代碼代碼如下:

 
Amount:<select name="SelectAmount" id="SelectAmount"><option value="45">10 Mil</option> 
<option value="46">20 Mil</option></select> 

下面介紹前臺(tái)的實(shí)現(xiàn)。下拉列表框的HTML代碼如下：

復(fù)制代碼代碼如下:

 
<div id="bannerLivechat_content"> 
<p> 
Game:<select id="SelectGame"></select></p> 
<p> 
Server:<select id="SelectServer"></select></p> 
<p> 
Amount:<select id="SelectAmount" name="SelectAmount"></select></p> 
<p> 
<asp:Button ID="ButtonFasyBuy" CssClass="btn_default" runat="server" Text="BuyNow" 
OnClick="ButtonFasyBuy_Click" /> 
</p> 
</div> 

為三個(gè)下拉列表寫(xiě)好事件處理函數(shù)，首先要加載Game列表：

復(fù)制代碼代碼如下:

 
function LoadGame() { 
$.getJSON('FastBuy.ashx', function(data) { 
var sel = $('#SelectGame')[0]; 
sel.innerHTML = ""; 
$.each(data, function(entryIndex, entry) { 
var op = new Option(entry); 
sel.options.add(op); 
}); 
$('#SelectGame')[0].selectedIndex = 0; 
var game = $('#SelectGame').val(); 
LoadServer(game); 
}); 
} 

首先清空當(dāng)前列表，$.each函數(shù)能夠遍歷第一個(gè)參數(shù)中的每個(gè)值，依次調(diào)用第二個(gè)參數(shù)的函數(shù)。并把值傳給entry參數(shù)。此時(shí)jQuery已經(jīng)把JSON數(shù)據(jù)解析成javascript對(duì)象，這里是一個(gè)字符串的數(shù)組。 function LoadServer(game) {

復(fù)制代碼代碼如下:

 
$.getJSON('FastBuy.ashx',{Game:game},function(data) { 
var sel = $('#SelectServer')[0]; 
sel.innerHTML = ""; 
$.each(data, function(entryIndex, entry) { 
var op = new Option(entry); 
sel.options.add(op); 
}); 
$('#SelectServer')[0].selectedIndex = 0; 
LoadAmount(game, $('#SelectServer').val()); 
}); 
} 

加載Server數(shù)據(jù)的過(guò)程是類(lèi)似的。

復(fù)制代碼代碼如下:

 
function LoadAmount(game, server) { 
$.getJSON('FastBuy.ashx', {Game:game,Server:server}, function(data) { 
var sel = $('#SelectAmount')[0]; 
sel.innerHTML = ""; 
$.each(data, function(entryIndex, entry) { 
var op = new Option(entry['AmountAttr'], entry['ID']); 
sel.options.add(op); 
}); 
}); 
} 

最后是加載Amount，這里稍微有一點(diǎn)不同，此時(shí)data中的數(shù)據(jù)不是簡(jiǎn)單的字符串了，而是一個(gè)有屬性的對(duì)象，可以用entry[‘ID‘]這樣的表達(dá)式來(lái)獲取表達(dá)式。在這個(gè)例子中，entry[‘ID‘]就是一個(gè)簡(jiǎn)單的數(shù)字了。當(dāng)然它完全可以是另一個(gè)復(fù)雜的對(duì)象或者數(shù)組，依服務(wù)器返回的JSON數(shù)據(jù)而定。
有了這些準(zhǔn)備工作，我們只要在ready函數(shù)中為下拉列表注冊(cè)下處理函數(shù)了：

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$('#SelectServer').change(function() { 
LoadAmount($('#SelectGame').val(), $('#SelectServer').val()); 
}); 
$('#SelectGame').change(function() { 
LoadServer($('#SelectGame').val()); 
}); 
LoadGame(); 
}); 

至此，一個(gè)三級(jí)聯(lián)動(dòng)下拉單完成了。
jQuery還有一個(gè)$.post函數(shù)，用法和get一樣，只是它發(fā)起的是post請(qǐng)求。