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 }
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
