1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3 <html>
4 <head>
5 <title>Title</title>
6 <script type="text/javascript">
7 /*
8 * 1、在文档加载完成后
9 * 获取所有省，添加到<select id="province">中
10 * 给<select id="province">这个元素添加onchange事件
11 * 事件内容：
12 * 1、获取当前选择的省id
13 * 2、使用省id访问servlet，得到该省下所有市
14 * 3、把每个市添加到<select id="city">中
15 * */
16 function createXMLHttpRequest() {
17 try {
18 return new XMLHttpRequest();
19 }catch (e) {
20 try {
21 return new ActiveXObject("Msxml2.XMLHTTP");
22 } catch (e) {
23 return new ActiveXObject("Micorsoft.XMLHTTP");
24 }
25 }
26 }
27 window.onload = function () {
28 /*
29 * 发送异步请求，得到所有省，然后使用每个省生成一个<option>元素添加到<select id="province">中
30 * */
31 var xmlHttp = createXMLHttpRequest();
32 xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);//打开连接
33 xmlHttp.send(null);//发送
34 xmlHttp.onreadystatechange = function () {//添加监听
35 if (xmlHttp.readyState == 4 ) {
36 if (xmlHttp.status == 200) {
37 var proArray = eval("("+xmlHttp.responseText+")");//执行服务器发送过来的json字符串，得到json的对象
38 for (var i = 0; i<proArray.length; i++) {
39 var pro = proArray[i];//得到每个pro对象
40 var optionEle = document.createElement("option");//创建<option>元素
41 optionEle.value = pro.pid;//<option>的实际值赋为pid，而不是name
42 var textNode = document.createTextNode(pro.name);//使用省名称来创建textNode
43 optionEle.appendChild(textNode);//把textNode添加到option元素中
44 document.getElementById("province").appendChild(optionEle);//把option元素添加到select元素中
45 }
46 }
47 }
48 };
49 //2、给<select id="province">添加change监听
50 document.getElementById("province").onchange = function () {
51 var xmlHttp = createXMLHttpRequest();//异步请求服务器，得到选择的省下的所有市
52 xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);//打开连接
53 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求头
54 xmlHttp.send("pid="+this.value);//发送,用户选择的省
55 xmlHttp.onreadystatechange = function () {//添加监听
56 if (xmlHttp.readyState == 4) {
57 if (xmlHttp.status == 200) {
58 /*
59 * 0、先清空原来的<option>元素
60 * 1、得到服务器发送过来的所有市
61 * 2、使用每个市生成<option>元素添加到<select id="city">中
62 * */
63 //清空<select id="city">中的选项
64 var citySelect = document.getElementById("city");
65 var cityOptionArray = citySelect.getElementsByTagName("option");//获取select中的所有子元素
66 while (cityOptionArray.length >1) {
67 citySelect.removeChild(cityOptionArray[1]);
68 }
69 var cityArray = eval("("+xmlHttp.responseText+")");//得到服务器发送过来的所有市
70 for (var i = 0; i<cityArray.length; i++) {
71 var city= cityArray[i];//得到每个city对象
72 var optionEle = document.createElement("option"); //创建<option>元素
73 optionEle.value = city.cid;//<option>的实际值赋为pid，而不是name
74 var textNode = document.createTextNode(city.name);//使用城市名称来创建textNode
75 optionEle.appendChild(textNode);//把textNode添加到option元素中
76 citySelect.appendChild(optionEle);//把option元素添加到select元素中
77 }
78 }
79 }
80 };
81 };
82 };
83 </script>
84 </head>
85 <body>
86 <h1>省市联动</h1>
87 <select name="province" id="province">
88 <option value="">===请选择省份===</option>
89 </select>
90 <select name="city" id="city">
91 <option value="">===请选择城市===</option>
92 </select>
93 </body>
94 </html>
1 package web.servlet;
2
3 import dao.Dao;
4 import domain.Province;
5 import net.sf.json.JSONArray;
6 import javax.servlet.ServletException;
7 import javax.servlet.annotation.WebServlet;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 import java.io.IOException;
12 import java.util.List;
13
14 @WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
15 public class ProvinceServlet extends HttpServlet {
16 protected void doGet(HttpServletRequest request, HttpServletResponse response)
17 throws ServletException, IOException {
18 response.setContentType("text/html;charset=utf-8");
19 /*
20 * 1、通过dao得到所有的省
21 * 2、把List<Province>转换成json
22 * 3、发送给客户端
23 * */
24 Dao dao = new Dao();
25 List<Province> provinces = dao.findAllProvince();
26 String json = JSONArray.fromObject(provinces).toString();
27 response.getWriter().print(json);
28 }
29 }
1 package web.servlet;
2
3 import dao.Dao;
4 import domain.City;
5 import net.sf.json.JSONArray;
6 import javax.servlet.ServletException;
7 import javax.servlet.annotation.WebServlet;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 import java.io.IOException;
12 import java.util.List;
13
14 @WebServlet(name = "CityServlet",urlPatterns = "/CityServlet")
15 public class CityServlet extends HttpServlet {
16 protected void doPost(HttpServletRequest request, HttpServletResponse response)
17 throws ServletException, IOException {
18 request.setCharacterEncoding("utf-8");
19 response.setContentType("text/html;charset=utf-8");
20 /*
21 * 1、获取名为pid的参数
22 * 2、使用这个省的id查询数据库，得到List<City>
23 * 3、转换成json，转发给客户端
24 * */
25 int pid = Integer.parseInt(request.getParameter("pid"));
26 Dao dao = new Dao();
27 List<City> cityList = dao.findByProvince(pid);
28 String json = JSONArray.fromObject(cityList).toString();
29 response.getWriter().print(json);
30 }
31 }
1 package domain;
2
3 public class City {
4 private int cid;
5 private String name;
6 private Province province;//多方关联一方
7
8 public int getCid() {
9 return cid;
10 }
11 public void setCid(int cid) {
12 this.cid = cid;
13 }
14 public String getName() {
15 return name;
16 }
17 public void setName(String name) {
18 this.name = name;
19 }
20 public Province getProvince() {
21 return province;
22 }
23 public void setProvince(Province province) {
24 this.province = province;
25 }
26 @Override
27 public String toString() {
28 return "City{" + "cid=" + cid + ", name='" + name + '\'' + ", province=" + province + '}';
29 }
30 }
1 package domain;
2
3 import java.util.List;
4
5 public class Province {
6 private int pid;
7 private String name;
8 private List<City> cityList;//一方关联多方
9
10 public int getPid() {
11 return pid;
12 }
13 public void setPid(int pid) {
14 this.pid = pid;
15 }
16 public String getName() {
17 return name;
18 }
19 public void setName(String name) {
20 this.name = name;
21 }
22 public List<City> getCityList() {
23 return cityList;
24 }
25 public void setCityList(List<City> cityList) {
26 this.cityList = cityList;
27 }
28 @Override
29 public String toString() {
30 return "Province{" + "pid=" + pid + ", name='" + name + '\'' + ", cityList=" + cityList + '}';
31 }
32 }
1 package dao;
2
3 import cn.itcast.jdbc.TxQueryRunner;
4 import domain.City;
5 import domain.Province;
6 import org.apache.commons.dbutils.QueryRunner;
7 import org.apache.commons.dbutils.handlers.BeanListHandler;
8 import java.sql.SQLException;
9 import java.util.List;
10
11 public class Dao {
12 private QueryRunner qr = new TxQueryRunner();
13 //查询所有的省
14 public List<Province> findAllProvince() {
15 try {
16 String sql = "SELECT * FROM t_province";
17 return qr.query(sql,new BeanListHandler<Province>(Province.class));
18 } catch (SQLException e) {
19 throw new RuntimeException(e);
20 }
21 }
22 //查询指定省下的所有市
23 public List<City> findByProvince(int pid) {
24 try {
25 String sql = "SELECT * FROM t_city WHERE pid=?";
26 return qr.query(sql,new BeanListHandler<City>(City.class),pid);
27 } catch (SQLException e) {
28 throw new RuntimeException(e);
29 }
30 }
31 }
