用ajax实现省市联动

页面：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();			
		} catch (e) {
			alert("您的浏览器不支持");
			throw e;
		}
	}
	
	window.onload = function() {
		//ajax四步，请求ProvinceServlet，得到所有的省份名称
		//使用每个省份名称创建一个<option>元素，添加到<select name="province">中
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("GET","/Web/ProvinceServlet",true);
		xmlHttp.send(null);
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//获取服务器的响应
				var text = xmlHttp.responseText;
				//使用逗号分隔它，得到数组
				var arr = text.split(",");
				//循环遍历每个省份名称，每个名称生成一个option对象，添加到select中
				for (var i = 0; i < arr.length; i++) {
					//创建一个指定名称元素
					var op = document.createElement("option");
					//设置op的实际值为当前的省份名称
					op.value = arr[i];
					//创建文本节点
					var textNode = document.createTextNode(arr[i]);
					//把文本子节点添加到op元素中，指定其显示值
					op.appendChild(textNode);
					document.getElementById("p").appendChild(op);
				}
			}
		};
		
		//给<select name="province">添加改变监听
		//使用选择的省份名称请求CityServlet，得到<province>元素（xml元素）
		//获取<province>元素中的所有的<city>元素，遍历，获取每个<city>的文本内容，即市名
		//使用每个市名创建<option>元素添加到<select name="province">中
		var proSelect = document.getElementById("p");
		proSelect,onchange = function() {
			var xmlHttp = createXMLHttpRequest();
			xmlHttp.open("POST","/Web/CityServlet",true);
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//把下拉列表中选择的值发送给服务器
			xmlHttp.send("pname=" + proSelect.value);
			xmlHttp.onreadystatechange = function() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					//把select中的所有option移除（除了==请选择==）
					var citySelect = document.getElementById("c");
					// 获取其所有子元素
					var optionEleList = citySelect.getElementsByTagName("option");
					// 循环遍历每个option元素，然后在citySelect中移除
					while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
						//总是删除1下标，因为1删除了，2就变成1了！
						citySelect.removeChild(optionEleList[1]);
					}
					
					var doc = xmlHttp.responseXML;
					// 得到所有名为city的元素
					var cityEleList = doc.getElementsByTagName("city");
					// 循环遍历每个city元素	
					for(var i = 0; i < cityEleList.length; i++) {
						//得到每个city元素
						var cityEle = cityEleList[i];
						var cityName;
						// 获取市名称
						if(window.addEventListener) {//处理浏览器的差异
							//支持FireFox等浏览器
							cityName = cityEle.textContent;
						} else {
							cityName = cityEle.text;//支持IE
						}
					
						// 使用市名称创建option元素，添加到<select name="city">中
						var op = document.createElement("option");
						op.value = cityName;
						// 创建文本节点
						var textNode = document.createTextNode(cityName);
						op.appendChild(textNode);//把文本节点追加到op元素中
						
						//把op添加到<select>元素中
						citySelect.appendChild(op);
					}
				}
			};
		};
	};
	
</script>
</head>
<body>
	<h1>省市联动</h1>
	<select name="province" id="p">
		<option>==请选择省==</option>
	</select>
	<select name="city" id="c">
		<option>==请选择市==</option>
	</select>
</body>
</html>

ProvinceServlet：

package com.java.servlet;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;

import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.io.SAXReader;

public class ProvinceServlet extends HttpServlet {
       
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
		response.setContentType("text/html;charset=utf-8");
		//相应所有省份名称，使用逗号隔开
		//Document对象 **创建解析器对象 ***调用解析器的读方法，传递一个流对象，得到Document
		try {
			SAXReader reader = new SAXReader();	
			InputStream input = this.getClass().getResourceAsstream("/china.xml");
			Document doc = reader.read(input);
			
			//查询所有province的name属性，得到一堆的属性对象
			//循环遍历，把所有的属性值连接成一个字符串，发送给客户端
			List<Attribute> arrList = doc.selectNodes("//province/@name");
			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < arrList.size(); i++) {
				//把每个属性的值存放到sb中
				sb.append(arrList.get(i).getValue());
				if(i < arrList.size()-1) {
					sb.append(",");
				}
			}
			response.getWriter().print(sb);
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
	}

}

CityServlet

package com.java.servlet;

import java.io.IOException;
import java.io.InputStream;

import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

public class CityServlet extends HttpServlet {

	public void doPost(HttpServletRequest request,IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/xml;charset=utf-8");
		//获取省份名称，加载该省对应的<province>元素
		//把元素转换成字符串发送给客户端
		//
		//获取省份名称
		//使用省份名称查找到对应的<province>元素
		//把<province>元素转换成字符串，发送
		try {
			//得到Document
			SAXReader reader = new SAXReader();
			InputStream input = this.getClass().getResourceAsstream("/china.xml");
			Document doc = reader.read(input);
			//获取参数
			String pname = request.getParameter("pname");
			Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']");
			//把元素转换成字符串
			String xmlStr = proEle.asXML();
			response.getWriter().print(xmlStr);
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
	
	}

}

用ajax实现省市联动

相关文章