AJAX应用案例--基于MysqL，以POST方式，用DOM对象，完成三级级下拉联动【省份-城市-区域】，效果图如下：
数据库如下：
@H_502_10@
- <%@pagelanguage="java"pageEncoding="UTF-8"%>
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
- <html bodyselectid="provinceID"option>请选择省份</optionvalue="1">广东optionvalue="2">湖南selectselectid="cityID">请选择城市selectid="areaID">请选择区域scripttype="text/javascript" functioncreateAJAX(){
- varajax=null;
- try{
- ajax=newActiveXObject("microsoft.xmlhttp");
- }catch(e){
- try{
- ajax=newXMLHttpRequest();
- }catch(e){
- alert("请更换浏览器");
- }
- }
- returnajax;
- script //创建AJAX引擎对象
- varajax=createAJAX();
- //产生事件
- document.getElementById("provinceID").onchange=function(){
- //再次选择省份时，清空city下拉框
- //定位city下拉框
- varcitySelectElement=document.getElementById("cityID");
- varoptionElementArray=citySelectElement.options;
- varsize=optionElementArray.length;
- if(size>1){
- for(vari=size-1;i>0;i--){
- citySelectElement.removeChild(optionElementArray[i]);
- //再次选择省份时，清空area下拉框
- //定位area下拉框
- varareaSelectElement=document.getElementById("areaID");
- varareaOptionArray=areaSelectElement.options;
- varsize=areaOptionArray.length;
- if(size>1){
- for(vari=size-1;i>0;i--){
- areaSelectElement.removeChild(areaOptionArray[i]);
- //获取选中省份的编号
- varoptionElement=this[this.selectedIndex];
- varprovinceId=optionElement.value;
- //准备发送请求
- varmethod="POST";
- varurl="${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+newDate().getTime();
- ajax.open(method,url);
- //设置以POST表单形式发送，自动将请求体的中文进行编码
- ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
- //真正发送请求体中的数据
- varcontent="provinceId="+provinceId+"&method=provinceToCity";
- ajax.send(content);
- //监听服务端的响应
- ajax.onreadystatechange=function(){
- if(ajax.readyState==4){
- if(ajax.status==200){
- varjsonJavaString=ajax.responseText;
- //jsonJavaString=[{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]
- varjson=eval("("+jsonJavaString+")");
- //返回值，就是可解析并执行的JavaScript代码
- //json=[{"name":"长沙"},{"name":"株洲"}]
- varsize=json.length;
- //迭代
- for(vari=0;isize;i++){
- varcity=json[i].name;
- varcid=json[i].id;
- //创建option节点
- varoptionElement=document.createElement("option");
- //设置option节点之间的内容
- optionElement.innerHTML=city;
- optionElement.setAttribute("value",cid);
- //添加到city下拉框中
- citySelectElement.appendChild(optionElement);
- };
- };
- //===============================cityToArea==================================================
- //产生事件
- document.getElementById("cityID").onchange=function(){
- //再次选择城市时，定位area下拉框，清空area下拉框
- //获取选中城市的编号
- varcid=optionElement.value;
- varcontent="cid="+cid+"&method=cityToArea";
- vararea=json[i].name;
- //varcid=json[i].name;
- optionElement.innerHTML=area;
- //optionElement.setAttribute("id",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> areaSelectElement.appendChild(optionElement);
- >
servlet代码：
@H_502_10@
