AJAX案例四：省市联动
Posted 凌晨三点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX案例四：省市联动相关的知识，希望对你有一定的参考价值。
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 6 <html> 7 <head> 8 <title>My JSP \'ajax5.jsp\' starting page</title> 9 10 <meta http-equiv="pragma" content="no-cache"> 11 <meta http-equiv="cache-control" content="no-cache"> 12 <meta http-equiv="expires" content="0"> 13 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 14 <meta http-equiv="description" content="This is my page"> 15 <!-- 16 <link rel="stylesheet" type="text/css" href="styles.css"> 17 --> 18 <script type="text/javascript"> 19 function createXMLHttpRequest() { 20 try { 21 return new XMLHttpRequest();//大多数浏览器 22 } catch (e) { 23 try { 24 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 25 } catch (e) { 26 try { 27 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 28 } catch (e) { 29 alert("用的是什么浏览器啊？"); 30 throw e; 31 } 32 } 33 } 34 } 35 /* 36 * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中 37 * 2. 在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素 38 * 解析xml文档，得到其中所有的<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中 39 */ 40 41 window.onload = function() { 42 /* 43 ajax四步，请求ProvinceServlet，得到所有省份名称 44 使用每个省份名称创建一个<option>元素，添加到<select name="province">中 45 */ 46 var xmlHttp = createXMLHttpRequest(); 47 xmlHttp.open("GET", "<c:url value=\'/ProvinceServlet\'/>", true); 48 xmlHttp.send(null); 49 xmlHttp.onreadystatechange = function() { 50 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 51 // 获取服务器的响应 52 var text = xmlHttp.responseText; 53 // 使用逗号分隔它，得到数组 54 var arr = text.split(","); 55 // 循环遍历每个省份名称，每个名称生成一个option对象，添加到<select>中 56 for(var i = 0; i < arr.length; i++) { 57 var op = document.createElement("option");//创建一个指名名称元素 58 op.value = arr[i];//设置op的实际值为当前的省份名称 59 var textNode = document.createTextNode(arr[i]);//创建文本节点 60 op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值 61 62 document.getElementById("p").appendChild(op); 63 } 64 } 65 }; 66 67 68 /* 69 第二件事情：给<select name="province">添加改变监听 70 使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！ 71 获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称 72 使用每个市名称创建<option>元素添加到<select name="city"> 73 */ 74 var proSelect = document.getElementById("p"); 75 proSelect.onchange = function() { 76 var xmlHttp = createXMLHttpRequest(); 77 xmlHttp.open("POST", "<c:url value=\'/CityServlet\'/>", true); 78 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 79 xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！ 80 xmlHttp.onreadystatechange = function() { 81 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 82 /* 83 把select中的所有option移除（除了请选择） 84 */ 85 var citySelect = document.getElementById("c"); 86 // 获取其所有子元素 87 var optionEleList = citySelect.getElementsByTagName("option"); 88 // 循环遍历每个option元素，然后在citySelect中移除 89 while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！ 90 citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！ 91 } 92 93 94 var doc = xmlHttp.responseXML; 95 // 得到所有名为city的元素 96 var cityEleList = doc.getElementsByTagName("city"); 97 // 循环遍历每个city元素 98 for(var i = 0; i < cityEleList.length; i++) { 99 var cityEle = cityEleList[i];//得到每个city元素 100 var cityName; 101 // 获取市名称 102 if(window.addEventListener) {//处理浏览器的差异 103 cityName = cityEle.textContent;//支持FireFox等浏览器 104 } else { 105 cityName = cityEle.text;//支持IE 106 } 107 108 // 使用市名称创建option元素，添加到<select name="city">中 109 var op = document.createElement("option"); 110 op.value = cityName; 111 // 创建文本节点 112 var textNode = document.createTextNode(cityName); 113 op.appendChild(textNode);//把文本节点追加到op元素中 114 115 //把op添加到<select>元素中 116 citySelect.appendChild(op); 117 } 118 } 119 }; 120 }; 121 }; 122 </script> 123 </head> 124 125 <body> 126 <h1>省市联动</h1> 127 <select name="province" id="p"> 128 <option>===请选择省===</option> 129 </select> 130 131 <select name="city" id="c"> 132 <option>===请选择市===</option> 133 </select> 134 </body> 135 </html>
1 import java.io.IOException; 2 import java.io.InputStream; 3 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import org.dom4j.Document; 10 import org.dom4j.Element; 11 import org.dom4j.io.SAXReader; 12 13 public class CityServlet extends HttpServlet { 14 15 public void doPost(HttpServletRequest request, HttpServletResponse response) 16 throws ServletException, IOException { 17 request.setCharacterEncoding("utf-8"); 18 response.setContentType("text/xml;charset=utf-8");//注意：发送xml这里要修改！！！ 19 20 /* 21 * 获取省份名称，加载该省对应的<province>元素！ 22 * 把元素转换成字符串发送给客户端 23 */ 24 /* 25 * 1. 获取省份的名称 26 * 2. 使用省份名称查找到对应的<province>元素 27 * 3. 把<province>元素转换成字符串，发送！ 28 */ 29 try { 30 /* 31 * 得到Document 32 */ 33 SAXReader reader = new SAXReader(); 34 InputStream input = this.getClass().getResourceAsStream("/china.xml"); 35 Document doc = reader.read(input); 36 37 /* 38 * 获取参数 39 */ 40 String pname = request.getParameter("pname");//获取省份名称 41 Element proEle = (Element) doc.selectSingleNode("//province[@name=\'" + pname + "\']"); 42 String xmlStr = proEle.asXML();//把元素转换成字符串 43 response.getWriter().print(xmlStr); 44 } catch(Exception e) { 45 throw new RuntimeException(e); 46 } 47 } 48 }
1 import java.io.IOException; 2 import java.io.InputStream; 3 import java.util.List; 4 5 import javax.servlet.ServletException; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 import org.dom4j.Attribute; 11 import org.dom4j.Document; 12 import org.dom4j.io.SAXReader; 13 14 public class ProvinceServlet extends HttpServlet { 15 16 public void doGet(HttpServletRequest request, HttpServletResponse response) 17 throws ServletException, IOException { 18 response.setContentType("text/html;charset=utf-8"); 19 /* 20 * 响应所有省份名称，使用逗号分隔！ 21 */ 22 /* 23 * 1. Document对象 24 * * 创建解析器对象 25 * * 调用解析器的读方法，传递一个流对象，得到Document 26 */ 27 try { 28 SAXReader reader = new SAXReader(); 29 InputStream input = this.getClass().getResourceAsStream("/china.xml"); 30 Document doc = reader.read(input); 31 32 /* 33 * 查询所有province的name属性，得到一堆的属性对象 34 * 循环遍历，把所有的属性值连接成一个字符串，发送给客户端 35 */ 36 List<Attribute> arrList = doc.selectNodes("//province/@name"); 37 StringBuilder sb = new StringBuilder(); 38 for(int i = 0; i < arrList.size(); i++以上是关于AJAX案例四：省市联动的主要内容，如果未能解决你的问题，请参考以下文章Ajax---案例（省市区联动）用到template()模块