當(dāng)前位置：首頁 >

（转）jQuery第五课：Ajax

發(fā)布時(shí)間：2025/4/5 20 豆豆

生活随笔收集整理的這篇文章主要介紹了（转）jQuery第五课：Ajax 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文地址：http://www.cnblogs.com/yinzixin/archive/2010/05/03/1726370.html

關(guān)于ajax早已不是新鮮話題，而jQuery使ajax變得無比簡(jiǎn)單。jQuery提供了若干個(gè)ajax函數(shù)，他們大同小異，只是為了處理不同類型的數(shù)據(jù)而分開來。最簡(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,僅作為示例，獲得查詢參數(shù)為word的值，并返回：

<%@ 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)代碼如下：

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

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

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

這是一個(gè)捆綁銷售商品選擇器，先選擇第一個(gè)屬性Game，再選擇Server，最后選擇Amount。服務(wù)器端如何從數(shù)據(jù)庫查找到合適的數(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是用來顯示在列表中的，ID是列表的value值，其余的沒有用到。例如：

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

?????????????????? <option value="46">20 Mil</option></select>

</p>

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

<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è)下拉列表寫好事件處理函數(shù)，首先要加載Game列表：

最后是加載Amount，這里稍微有一點(diǎn)不同，此時(shí)data中的數(shù)據(jù)不是簡(jiǎn)單的字符串了，而是一個(gè)有屬性的對(duì)象，可以用entry[‘ID‘]這樣的表達(dá)式來獲取表達(dá)式。在這個(gè)例子中，entry[‘ID‘]就是一個(gè)簡(jiǎn)單的數(shù)字了。當(dāng)然它完全可以是另一個(gè)復(fù)雜的對(duì)象或者數(shù)組，依服務(wù)器返回的JSON數(shù)據(jù)而定。

有了這些準(zhǔn)備工作，我們只要在ready函數(shù)中為下拉列表注冊(cè)下處理函數(shù)了：

$(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)求。

轉(zhuǎn)載于:https://www.cnblogs.com/fcsh820/archive/2010/05/03/1726452.html

總結(jié)

以上是生活随笔為你收集整理的（转）jQuery第五课：Ajax的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：划时代的项目管理核心引擎——Dynami
下一篇： MSS12反坦克导弹