码迷,mamicode.com
首页 > Web开发 > 详细

Ajax二级联动下拉列表

时间:2015-06-28 22:59:26      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

客户端与服务器端采用XML进行通信。

程序中涉及到了xml文件的组装发送和解析。

  • 服务器端
public class CityServlet extends HttpServlet {
	private static final String CONTENT_TYPE ="text/xml; charset=utf-8";
	
	public CityServlet(){
		super() ;
	}
	public void destroy(){
		super.destroy(); 
	}
	/**
	 * 数据是xml格式的
	 */
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType(CONTENT_TYPE); 
		String province = req.getParameter("province") ;
		StringBuffer city = new StringBuffer("<citys>") ;//记录返回XML串的对象
		List list = cityInit ();
		if ("gx".equals(province)){
			for (int i =0;i<list.size();i++){
				city.append("<city>"+list.get(i)+"</city>") ;
			}
		}
		city.append("</citys>") ;
		PrintWriter out = resp.getWriter() ;
		out.print(city.toString());
		out.flush(); 
		out.close(); 
	}
	private List<String> cityInit() {
		List<String > cityList = new ArrayList<String>();
		cityList.add("nanning ");
		cityList.add("guiling") ;
		cityList.add("hena") ;
		return cityList ;
	}
	
}

配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <servlet>
    <servlet-name>cityservlet</servlet-name>
    <servlet-class>com.chuiyuan.servlet.CityServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>cityservlet</servlet-name>
    <url-pattern>/servlet/CityServlet</url-pattern>
  </servlet-mapping>

</web-app>
  • 客户端
<%@ page language="java" import ="java.util.*" pageEncoding="gb2312" %>
<html>
	<head>
		<title>dynamic load</title>
	 	<script type="text/javascript">
	 	var xmlHttp = false ;
	 	function createXMLHttpRequest(){
	 		if (window.ActiveXObject){//Internet Explorer时,创建XMLHttpRequest对象的方法
	 			try{
	 				xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP") ;
	 			}catch (e){
	 				try{
	 					xmlHttmp = new ActiveXObject ("Microsoft.XMLHTTP") ; 
	 					 //旧版本的Internet Explorer,创建XMLHttpRequest对象
	 				}catch (e){
						window.alert("创建XMLHttpRequest对象错误 "+ e) ;	 				
	 				}
	 			}
	 		}else if (window.XMLHttpRequest ){//mozilla时,创建XMLHttpRequest对象的方法
				xmlHttp = new XMLHttpRequest();	 		
	 		}
	 		if (!(xmlHttp)){
	 			//未成功创建XMLHttpRequest对象
		   		 window.alert("创建XMLHttpRequest对象异常!");
	 		}
	 	}
	 	//下拉列表改变时的操作
	 	function proChange(objVal ){
	 		alert ("proChange:"+ objVal );
	 		createXMLHttpRequest() ;//
	 		document.getElementById ("city").length=1;//根据ID获取指定元素,并赋值
	 		xmlHttp.onreadystatechange = cityList ;//指定onreadystatechange处理函数
	 		var url ="/Ajax1/servlet/CityServlet?province="+objVal ;//url 
	 		xmlHttp.open("GET", url ,true) ;
	 		xmlHttp.send(null) ;
	 	
	 	}
	 	function cityList (){ //onreadtstatechange的处理函数 
	 		if (xmlHttp.readyState==4){
	 			if (xmlHttp.status==200){
	 				alert ("cityList:"+xmlHttp.responseXML) ;
	 				parseXML(xmlHttp.responseXML) ;//解析服务器返回的XML数据
	 			}
	 		}
	 	}
	 	function parseXML (xmlDoc ){
	 		alert("parseXML") ;
	 		var len = xmlDoc.getElementsByTagName("city") ;
	 		alert("parseXML len:"+len.length) ;
	 		//获取XML数据中所有的“city”元素对象集合
	 		var _citySel = document.getElementById ("city") ;//根据ID获取页面中的select元素
	 		for (var i=0; i<len.length; i++){//遍历XML数据并给select元素添加选项
	 			var opt = document.createElement("OPTION");//创建option对象
	 			opt.text = xmlDoc.getElementsByTagName ("city")[i].firstChild.data;
	 			alert("parseXML:"+opt.text) ;
	 			//指定新创建元素的text属性值
	 			opt.value= xmlDoc.getElementsByTagName ("city")[i].firstChild.data;
	 			 //指定新创建元素的value属性值
	 			_citySel.add(opt) ;
	 		}  
	 	}
	 	</script>
	</head>
	
	<body>
		<table align ="center" border=1 width="320">
			<tr>
				<td>省份:</td>
				<td>
					<select id="province" onchange="proChange(this.value);"  style="width:85">
						<option value="gd">guangdong</option>
						<option value="gx">guangxi</option>
						<option value="hn">henan</option>
						<option value="hb">hubei</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<select id ="city" style="width:85">
						<option value=""> 请选择</option>
					</select>
				</td>
		</table>
	</body>
</html>

js 调试可以用alert 。

servlet调试可以用System.out.println()。 

  

  

Ajax二级联动下拉列表

标签:

原文地址:http://www.cnblogs.com/chuiyuan/p/4606221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!