Ajax——省市联动

最新推荐文章于 2022-08-21 09:53:10 发布

樊豆豆123

最新推荐文章于 2022-08-21 09:53:10 发布

阅读量406

点赞数

分类专栏： JAVA web

本文链接：https://blog.csdn.net/fandoudou123/article/details/50879423

版权

JAVA web 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

1. 页面
<select name="province">
<option>===请选择省份===</option>
</select>
<select name="city">
<option>===请选择城市===</option>
</select>

2. ProvinceServlet
* ProvinceServlet：当页面加载完毕后马上请求这个Servlet！
> 它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端！

3. 页面的工作
* 获取这个字符串，使用逗号分隔，得到数组
* 循环遍历每个字符串（省份的名称），使用每个字符串创建一个<option>元素添加到<select name="province">这个元素中

4. CityServlet
* CityServlet：当页面选择某个省时，发送请求！
* 得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象！，把这个元素转换成xml字符串，发送给客户端

5. 页面的工作
* 把<select name="city">中的所有子元素删除，但不要删除<option>===请选择城市===</option>
* 得到服务器的响应结果：doc！！！
* 获取所有的<city>子元素，循环遍历，得到<city>的内容

* 使用每个<city>的内容创建一个<option>元素，添加到<select name="city">

package servlet;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
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");
		/*
		 * 响应所有省份名称，使用逗号隔开
		 */
		/*
		 * 1.Docuemnt对象
		 *   创建解析器对象
		 *   使用解析器的读方法，传递一个流对象，得到Document
		 */
		try {
			SAXReader reader=new SAXReader();
			InputStream input=this.getClass().getResourceAsStream("/china.xml");
			Document doc=reader.read(input);
			/*
			 * 2.查找所有province的name属性，循环遍历，把所有的属性值连接起来，构成一个字符串
			 * 传递给客户端
			 */
			List <Attribute> attList=doc.selectNodes("//province/@name");
			StringBuilder sb=new StringBuilder();
			for(int i=0;i<attList.size();i++){
				sb.append(attList.get(i).getValue());
				if(i!=attList.size()-1){
					sb.append(",");
				}
			}
			response.getWriter().print(sb);
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			throw new RuntimeException(e);
		}
	}

}

package servlet;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
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.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;

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");
		/*
		 * 1.获取省份的名称
		 * 2.使用省份名称查找到对应的<province>元素
		 * 3.把<province>元素转换成字符串，发送到客户端
		 */
		String pname=request.getParameter("provincename"); //provincename
		System.out.println(pname);
		
		//获取Document
		try {
			SAXReader reader=new SAXReader();
			InputStream input=this.getClass().getResourceAsStream("/china.xml");
			Document doc=reader.read(input);
			
			Element ele=(Element) doc.selectSingleNode("//province[@name='"+pname+"']");
			String xmlstr=ele.asXML(); //把元素转换成字符串
			System.out.println(xmlstr);
			response.getWriter().print(xmlstr);
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			throw new RuntimeException(e);
		}
	}
	
}

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax5.jsp' starting page</title>
    
	<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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
		} catch (e) {
			try {
				return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本	
			} catch (e) {
				alert("哥们儿，您用的是什么浏览器啊？");
				throw e;
			}
		}
	}
}
/*
 * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中
 * 2. 在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素
 *   解析xml文档，得到其中所有的<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中
 */

window.onload = function() {
	/*
	ajax四步，请求ProvinceServlet，得到所有省份名称
	使用每个省份名称创建一个<option>元素，添加到<select name="province">中
	*/
	var xmlHttp = createXMLHttpRequest();
	xmlHttp.open("GET", "<c:url value='/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.value = arr[i];//设置op的实际值为当前的省份名称
				var textNode = document.createTextNode(arr[i]);//创建文本节点
				op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
				
				document.getElementById("p").appendChild(op);
			}
		}
	};
	
	
	/*
	第二件事情：给<select name="province">添加改变监听
	使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！
	获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称
	使用每个市名称创建<option>元素添加到<select name="city">
	*/
	var proSelect = document.getElementById("p");
	proSelect.onchange = function() {
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send("provincename=" + 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就不循环了！
					citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
				}
				
				
				var doc = xmlHttp.responseXML;
				// 得到所有名为city的元素
				var cityEleList = doc.getElementsByTagName("city");
				// 循环遍历每个city元素
				for(var i = 0; i < cityEleList.length; i++) {
					var cityEle = cityEleList[i];//得到每个city元素
					var cityName;
					// 获取市名称
					if(window.addEventListener) {//处理浏览器的差异
						cityName = cityEle.textContent;//支持FireFox等浏览器
					} 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>