jQuery 学习第五课 Ajax 使用说明(2)

$.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数据的过程是类似的。

复制代码 代码如下:

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，这里稍微有一点不同，此时data中的数据不是简单的字符串了，而是一个有属性的对象，可以用entry[‘ID‘]这样的表达式来获取表达式。在这个例子中，entry[‘ID‘]就是一个简单的数字了。当然它完全可以是另一个复杂的对象或者数组，依服务器返回的JSON数据而定。
有了这些准备工作，我们只要在ready函数中为下拉列表注册下处理函数了：

复制代码 代码如下:

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

至此，一个三级联动下拉单完成了。
jQuery还有一个$.post函数，用法和get一样，只是它发起的是post请求。