jQuery 學(xué)習(xí)第五課 Ajax 使用說(shuō)明
jQuery提供了若干個(gè)ajax函數(shù)，他們大同小異，只是為了處理不同類型的數(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,僅作為示例，獲得查詢參數(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)依次滑過(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格式非常類似于javascript中的對(duì)象字面量。{}表示一個(gè)對(duì)象，[]表示一個(gè)數(shù)組。
下面來(lái)實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)下拉菜單。先看下最終效果：
這是一個(gè)捆綁銷售商品選擇器，先選擇第一個(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)有用到。例如：
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代碼如下：
<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列表：
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) {
$.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ò)程是類似的。
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ù)了：
$(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)求。
相關(guān)文章
jQuery HTML設(shè)置內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML設(shè)置內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML設(shè)置內(nèi)容和屬性相關(guān)函數(shù)與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)
在本篇文章里小編給各位整理的是關(guān)于jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)以及相關(guān)實(shí)例，需要的朋友們學(xué)習(xí)下。2019-10-10
這篇文章主要介紹了jQuery中ScrollTo用法,結(jié)合實(shí)例形式分析了jQuery中ScrollTo的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)給input綁定回車事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給input綁定回車事件的方法,結(jié)合實(shí)例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了jquery datatable服務(wù)端分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery學(xué)習(xí)筆記(2)--用jquery實(shí)現(xiàn)各種模態(tài)提示框代碼及項(xiàng)目構(gòu)架
想實(shí)現(xiàn)一個(gè)模態(tài)的框框，找了很多的jquery插件，都沒(méi)有碰到自己滿意的于是自己摸索了一個(gè)，接下來(lái)為大家介紹下實(shí)現(xiàn)的思路及代碼，希望對(duì)你有所幫助2013-04-04
本文目的：為了了解stop()的用法，舉個(gè)例子，直觀的方式看看。非常的簡(jiǎn)單實(shí)用，有需要的小伙伴參考下2014-11-11
頁(yè)面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成，onload，ready概念容易混淆，下面為大家詳細(xì)介紹下2013-04-04
這篇文章主要介紹了jquery控制display屬性為none或block,需要的朋友可以參考下2014-03-03
jQuery中slidedown與slideup方法用法示例
這篇文章主要介紹了jQuery中slidedown與slideup方法用法,結(jié)合實(shí)例形式分析了jQuery基于slidedown與slideup方法實(shí)現(xiàn)頁(yè)面元素展開(kāi)與折疊的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-09-09