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

这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到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;i<province.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","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<citys.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();
		List<Sheng> 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();
			List<City> 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();
		}
	}

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

相关文章