AJAX解析XML实例之下拉框省、市二级联动-巨人网络通讯

AJAX解析XML实例之下拉框省、市二级联动

这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值：

jsp页面代码：

复制代码代码如下:

 
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
html> 
head> 
/head> 
script type="text/javascript"> 
var xmlHttp=null; 
//创建xmlhttprequest对象 
if(window.XMLHttpRequest){ 
xmlHttp=new XMLHttpRequest(); 
}else{ 
xmlHttp=new ActiveObject("Microsoft.XMLHTTP"); 
} 
var url="GetProvince?time="+new Date().getTime(); 
function getsheng(){ 
xmlHttp.open("post",url,true); 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xmlHttp.send(); 
xmlHttp.onreadystatechange=getprovince; 
} 
function getprovince(){ 
if(xmlHttp.readyState==4  xmlHttp.status==200){ 
var xmlFile=xmlHttp.responseXML; 
//获取省的节点 
var province=xmlFile.getElementsByTagName("province");; 
//获取select标签 
var pselect=document.getElementById("sheng"); 
//循环取出xml文件省信息 
for(var i=0;iprovince.length;i++){ 
var shorter=province[i].getAttribute("name"); 
var provincename=province[i].text; 
//循环将省信息放入select中 
pselect.options.add(new Option(provincename,shorter));//(text,value) 
} 
} 
} 
function getcity(){ 
xmlHttp.open("post",url,true); 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
var province=document.getElementById("sheng").value; 
alert("省："+province); 
xmlHttp.send("province="+province); 
xmlHttp.onreadystatechange=setcity; 
} 
function setcity(){ 
if(xmlHttp.readyState==4  xmlHttp.status==200){ 
var city=document.getElementById("city"); 
var cityXml=xmlHttp.responseXML; 
city.options.length=0; 
var citys=cityXml.getElementsByTagName("city"); 
for(var i=0;icitys.length;i++){ 
var cityname=citys[i].text; 
alert(cityname); 
city.options.add(new Option(cityname,cityname)); 
} 
} 
} 
/script> 
body onload="getsheng()"> 
省：select name="sheng" id="sheng" onchange="getcity()"> 
option>请选择/option> 
/select> 
市：select name="city" id="city"> 

/select> 
/body> 
/html> 

servlet代码：

复制代码代码如下:

 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
request.setCharacterEncoding("utf-8"); 
String province=request.getParameter("province"); 
if(province!=null){ 
sendCity(request,response,province); 
}else{ 
ShengDao sd=new ShengDao(); 
ListSheng> list=sd.selAll(); 
response.setCharacterEncoding("utf-8"); 
PrintWriter out=response.getWriter(); 
response.setContentType("text/xml"); 
out.println("?xml version='1.0' encoding='UTF-8'?>"); 
out.println("china>"); 
for (Sheng sheng : list) { 
out.print("province name='"+sheng.getShorter()+"'>"+sheng.getProvince()+"/province>"); 
out.println(); 
} 
out.println("/china>"); 
} 
} 

public void sendCity(HttpServletRequest request, HttpServletResponse response,String shorter){ 
try { 
request.setCharacterEncoding("utf-8"); 
} catch (UnsupportedEncodingException e1) { 
e1.printStackTrace(); 
} 
try { 
response.setCharacterEncoding("utf-8"); 
PrintWriter out=response.getWriter(); 
response.setContentType("text/xml"); 
ShengDao sd=new ShengDao(); 
ListCity> list=sd.selAll(shorter); 
out.println("?xml version='1.0' encoding='UTF-8'?>"); 
out.println("province>"); 
for (City city : list) { 
out.println("city name='"+city.getShorter()+"'>"+city.getCityname()+"/city>"); 
System.out.println("city name='"+city.getShorter()+"'>"+city.getCityname()+"/city>"); 
} 
out.println("/province>"); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
} 