[卡国17天传说8]ASP会员管理第八章AJAX连动选单
2020-06-09


第八章 AJAX连动选单
在前面章节的新增会员资料中,我们预留了一个地址栏位
这边就用县市的选取来示範如何利用AJAX做到连动选单。
[卡国17天传说8]ASP会员管理第八章AJAX连动选单
当然你可以直接留一下个文字栏位让客户自己输入地址,但你必须有心理準备客户会将「台南市」写成「南市」或写成「台南」,甚至直接省略。如果你往后有地址查询或是要将客户资料印成地址条的需求时,光是整理这些资料就够烦人的了。
所以我们可以将县市用连动选单的方式让客户选取,就是选择了县市,就会将县市底下的地区带出来,让县市和区域的输入方式有一个规範。
要达成这种效果有很多种方法,你可以把所有的县市资料用javascritp二维阵列的方式,或是直接带参数换页。但这些方式都太不麻烦了。这边要介绍方式是 AJAX异步技术。
所谓的AJAX异步技术,简单来说就是每次只改变页面的某个元素,而不直接换页。最近这种技术大量的被使用,googleMap就是其中一种应用。
在开始AJAX之前,要稍微讲一下javascript的物件JSON,它可以让字串以物件的方式封装起来,这边有个简单的範例
var str = {DOG:[
{Name:'小黑',Color:'黑'},
{Name:'小白',Color:'白'},
{Name:'小黄',Color:'黄'}
]}
上面是一个 JSON物件,将3只狗的姓名跟特徵封成物件后,我们可以这幺使用。
str.DOG.length得到3,表示里面有3只狗
str.DOG[0].Name得到第1只狗的名字叫’小黑’
str.DOG[2].Color得到第3只狗的颜色’黄’
简单的认识 JSON后,我们来看一下在连动选单中怎幺去运用它。
这边有2个选单,一个是「县市选单」另一个是「区域选单」
在页面载入时,县市选单就要先列出所有的县市
当县市选单被选取后,区域选单会跟着它连动。

流程是
页面载入完成=>向伺服器送出要求=>伺服器返回数据=>封装成JSON物件=>填入指定的元素
要使用AJAX时,我们要在页面中加载prototype.js这个js档,这个是一个最常被使用的AJAX函式库,你可以在网路上找到,也可以从附件中取得。
在页面中加上

就可以调用AJAX的函数了!
回到实际的做法是,载入页面时,我们向LoadCity.asp发出请求,在这个页面我们必须将字串处理成符合JSON的格式也就是 {data:[….]}
返回的字串利用eval去执行它,封装成JSON物件,接着利用迴圈建立出县市选单。
接着在县市选单加上onchange的事件,当县市被选取后,向LoadDistrict.asp发出请求,和上面步骤一样,生成区域选单。
这边要注意的是,当区域选单生成后,使用者再选取其他县市时,我们必须将原先的区域选单清空,再生成新的。
区域选单上也加上onchange的事件,选取后自动填入邮递区号。
修改会员时,除了上述生成选单外,我们要将原有的资料填入。
在AJAX运用上有个事件为onComplete,触发的要件是AJAX动作完成后,所以可以在这个函数中将资料填入
//完成后执行的函数
function onComplete{
if!== 'undefined' && val !== ''){
switch{
case 'City':
$.value = val;
break;
case 'District':
$.value = val;
$.value = val;
break;
}
}
}
[卡国17天传说8]ASP会员管理第八章AJAX连动选单
这个章节的东西比较複杂,如有不明白的地方请各位踊跃提问哦~


上一篇:
下一篇: