Ajax实现的省市联动——案例

演示视频

ajax实现的省市联动 演示视频

前端页面 demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



<html>
	<head>
		<title>Ajax实现的省市联动Demotitle>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		
		<script type="text/javascript">
			// 创建异步对象
			function createXMLHttpRequest() {
				try {
					return new XMLHttpRequest(); // 支持大多数浏览器
				} catch (e) {
					try {
						return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器			
					} catch (e) {
						try {
							return new ActiveXObject("Microsoft.XMLHTTP"); //支持IE5.5以及更早版本的浏览器
						} catch (e) {
							alert("不支持您的浏览器!");
							throw e;
						}
					}
				}
			}

			//在文档加载完毕时发送请求,得到所有的省份名称,显示在
			window.onload = function() {
				// Ajax四步:请求ProvinceServlet,得到所有的省份名称
				// 使用每一个省份创建一个
					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);
					}

				};
				// 给
				var proSelect = document.getElementById("p");
				proSelect.onchange = function() {
					var xmlHttp = createXMLHttpRequest();
					xmlHttp.open("POST", "", 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");
							while (optionEleList.length > 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) {
									cityName = cityEle.textContent;
								} else {
									cityName = cityEle.text;
								}
								// 使用城市名称创建option元素,添加到select元素中。
								var op = document.createElement("option");
								op.value = cityName;
								// 创建文本节点
								var textNode = document.createTextNode(cityName);
								op.appendChild(textNode);
								var citySelect = document.getElementById("c");
								citySelect.appendChild(op);

							}
						}

					};
				};
			};
		script>
	head>

	<body>
		<select name="province" id="p">
			<option>===请选择省份===option>
		select>
		<select name="city" id="c">
			<option>===请选择城市===option>
		select>
	body>
html>

后台Servlet

1.ProvinceServlet

package com.veeja.web.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.DocumentException;
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");

		/*
		 * 响应所有省份名称,省份之间用逗号隔开
		 */
		try {
			// 创建一个解析器对象,调用解析器的读方法,传递一个流对象,得到Document
			SAXReader reader = new SAXReader();
			InputStream input = this.getClass().getResourceAsStream(
					"/china.xml");
			Document document = reader.read(input);
			// 查询所有的province的name属性,得到一堆的属性对象
			// 循环遍历,把所有的属性值连接成一个字符串,发送给客户端
			List<Attribute> arrList = document.selectNodes("//province/@name");
			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < arrList.size(); i++) {
				sb.append(arrList.get(i).getValue());
				if (i < arrList.size() - 1) {
					sb.append(",");
				}
			}
			response.getWriter().print(sb);
		} catch (DocumentException e) {
			throw new RuntimeException(e);
		}
	}
}

2. CityServlet

package com.veeja.web.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.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

public class CityServlet extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		// 注意,这里要改成XML
		response.setContentType("text/xml;charset=utf-8");
		/*
		 * 获取省份名称,加载该省份对应的元素。
		 * 
		 * 把元素转换成字符串发送给客户端。
		 */
		// 获取省份名称,使用省份名称查找到对应的元素,
		// 把元素转换成字符串,发送。
		try {
			// 创建一个解析器对象,调用解析器的读方法,传递一个流对象,得到Document
			SAXReader reader = new SAXReader();
			InputStream input = this.getClass().getResourceAsStream(
					"/china.xml");
			Document document = reader.read(input);
			// 获取省份名称
			String pname = request.getParameter("pname");
			System.out.println(pname);
			Element proEle = (Element) document
					.selectSingleNode("//province[@name='" + pname + "']");
			// 把元素转换为字符串
			System.out.println(proEle);
			String xmlStr = proEle.asXML();
			response.getWriter().print(xmlStr);
		} catch (DocumentException e) {
			throw new RuntimeException(e);
		}
	}
}


END.

你可能感兴趣的:(JavaWeb)