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

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

jsp页面代码：

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

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;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;i

var cityname=citys[i].text;

alert(cityname);

city.options.add(new Option(cityname,cityname));

}

}

}

省：

请选择

市：

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();

List 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("");

for (Sheng sheng : list) {

out.print(""+sheng.getProvince()+"");

out.println();

}

out.println("");

}

}

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();

List list=sd.selAll(shorter);

out.println("<?xml version='1.0' encoding='UTF-8'?>");

out.println("");

for (City city : list) {

out.println(""+city.getCityname()+"");

System.out.println(""+city.getCityname()+"");

}

out.println("");

} catch (IOException e) {

e.printStackTrace();

}

}