jsp: ssldAjax.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'ssldAjax.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"> /* *1.在文档加载完成后 *获取所有省，添加到<select id="p"> *给<select id="p">这个元素添加onchange事件 事件内容： 1.获取当前选择的省id 2.使用省id访问servlet，得到该省所有市 3.把所有市添加到<select id='c'> */ 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){ //执行服务器发送过来的json字符串，得到jsduix var proArray=eval("("+xmlhttp.responseText+")"); //alert(proArray[1].pname); for(var i=0;i<proArray.length;i++){ //得到每个pro对象 var pro =proArray[i]; //创建option var optionEle=document.createElement("option"); //给option元素value属性赋值 optionEle.value=pro.pid; //创建文本节点 var textNode=document.createTextNode(pro.pname); optionEle.appendChild(textNode);//把文本子节点添加到optionEle元素中，指定其显示值 document.getElementById("p").appendChild(optionEle); } } }; /* 第二件事情：给<select name="province">添加改变监听 使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！ 获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称 使用每个市名称创建<option>元素添加到<select name="city"> */ document.getElementById("p").οnchange=function(){ var xmlhttp=createXMLHttpRequest(); xmlhttp.open("POST","<c:url value='/CityServlet'/>","true"); //设置请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("pid="+this.value); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ /* *清空原来option所有元素 *得到所有市 *使每个市生成option元素添加到<select id="c">; */ //清空<select id="c">所有选项 var citySelect=document.getElementById("c"); var cityOptionArray=citySelect.getElementsByTagName("option"); while(cityOptionArray.length>1){ citySelect.removeChild(cityOptionArray[1]); } //得到服务器发过来的所有市 var cityArray=eval("("+xmlhttp.responseText+")"); for(var i=0;i<cityArray.length;i++){ var city=cityArray[i]; var optionEle=document.createElement("option"); optionEle.value=city.cid; var textNode=document.createTextNode(city.cname); optionEle.appendChild(textNode); citySelect.appendChild(optionEle); } } }; }; } </script> </head> <body> <h1>省市联动</h1> <select name="province" id="p"> <option>====请选择省====</option> </select> <select name="city" id="c"> <option>====请选择市====</option> </select> </body> </html> itcast.web.servlet: ProvinceServlet.java public class ProvinceServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); /* * 通过dao得到所有值 * 把List<Province>转换为json * >JSONArray jsonArray = JSONObject.fromObject(list)：把list转换成JSONArray对象 * >toString() * 发送给客户端 */ Dao dao=new Dao(); List<Province> provinceList=dao.findAllProvince(); JSONArray jsonArray=JSONArray.fromObject(provinceList); String json=jsonArray.toString(); response.getWriter().print(json); } } CityServlet.java public class CityServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* * 获取pid参数 * 通过dao得到List<City>,转换为json * 发送给客户端 */ int pid=Integer.parseInt(request.getParameter("pid")); Dao dao=new Dao(); List<City> cityList=dao.findByProvince(pid); JSONArray jsonArray=JSONArray.fromObject(cityList); String json=jsonArray.toString(); //System.out.println(json); response.getWriter().print(json); } } itcast.dao: Dao.java public class Dao { private QueryRunner qr=new TxQueryRunner(); /** * 查询所有省 */ public List<Province> findAllProvince(){ try { String sql="select * from t_province"; return qr.query(sql, new BeanListHandler<Province>(Province.class)); } catch (SQLException e) { throw new RuntimeException(e); } } /** * 查询置顶省份的所有城市 */ public List<City> findByProvince(int pid){ try { String sql="select * from t_city where pid=?"; return qr.query(sql, new BeanListHandler<City>(City.class),pid); } catch (SQLException e) { throw new RuntimeException(e); } } } itcast.domain: Province.java public class Province { private int pid; private String pname; private List<City> cityList; @Override public String toString() { return "Province [pid=" + pid + ", pname=" + pname + ", cityList=" + cityList + "]"; } public int getPid() { return pid; } public void setPid(int pid) { this.pid = pid; } public String getPname() { return pname; } public void setPname(String pname) { this.pname = pname; } public List<City> getCityList() { return cityList; } public void setCityList(List<City> cityList) { this.cityList = cityList; } } City.java public class City { private int cid; private String cname; private Province province; @Override public String toString() { return "City [cid=" + cid + ", cname=" + cname + ", province=" + province + "]"; } public int getCid() { return cid; } public void setCid(int cid) { this.cid = cid; } public String getCname() { return cname; } public void setCname(String cname) { this.cname = cname; } public Province getProvince() { return province; } public void setProvince(Province province) { this.province = province; } } 所有包如下： c3p0-0.9.2-pre1.jar commons-beanutils-1.8.3.jar commons-collections-3.2.1.jar commons-dbutils-1.4.jar commons-lang-2.5.jar commons-logging-1.1.1.jar ezmorph-1.0.6.jar itcast-tools-1.4.2.jar json-lib-2.4-jdk15.jar mchange-commons-0.2.jar mysql-connector-java-5.1.28-bin.jar xom-1.1.jar 配置文件 c3p0-config.xml 数据库sql语句： /* SQLyog Ultimate v8.32 MySQL - 5.5.36 : Database - china ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; /*Table structure for table `t_city` */ DROP TABLE IF EXISTS `t_city`; CREATE TABLE `t_city` ( `cid` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) DEFAULT NULL, `pid` int(11) DEFAULT NULL, PRIMARY KEY (`cid`), KEY `fk_province` (`pid`), CONSTRAINT `fk_province` FOREIGN KEY (`pid`) REFERENCES `t_province` (`pid`) ) ENGINE=InnoDB AUTO_INCREMENT=438 DEFAULT CHARSET=utf8; /*Data for the table `t_city` */ insert into `t_city`(`cid`,`name`,`pid`) values (1,'东城区',1),(2,'西城区',1),(3,'崇文区',1),(4,'宣武区',1),(5,'朝阳区',1),(6,'丰台区',1),(7,'石景山区',1),(8,'海淀区',1),(9,'门头沟区',1),(10,'房山区',1),(11,'通州区',1),(12,'顺义区',1),(13,'昌平区',1),(14,'大兴区',1),(15,'怀柔区',1),(16,'平谷区',1),(17,'密云县',1),(18,'延庆县',1),(19,'和平区',2),(20,'河东区',2),(21,'河西区',2),(22,'南开区',2),(23,'河北区',2),(24,'红桥区',2),(25,'塘沽区',2),(26,'汉沽区',2),(27,'大港区',2),(28,'东丽区',2),(29,'西青区',2),(30,'津南区',2),(31,'北辰区',2),(32,'武清区',2),(33,'宝坻区',2),(34,'宁河县',2),(35,'静海县',2),(36,'蓟县',2),(37,'石家庄',3),(38,'唐山',3),(39,'秦皇岛',3),(40,'邯郸',3),(41,'邢台',3),(42,'保定',3),(43,'张家口',3),(44,'承德',3),(45,'沧州',3),(46,'廊坊',3),(47,'衡水',3),(48,'太原',4),(49,'大同',4),(50,'阳泉',4),(51,'长治',4),(52,'晋城',4),(53,'朔州',4),(54,'晋中',4),(55,'运城',4),(56,'忻州',4),(57,'临汾',4),(58,'吕梁',4),(59,'呼和浩特',5),(60,'包头',5),(61,'乌海',5),(62,'赤峰',5),(63,'通辽',5),(64,'鄂尔多斯',5),(65,'呼伦贝尔',5),(66,'巴彦淖尔',5),(67,'乌兰察布',5),(68,'兴安盟',5),(69,'锡林郭勒盟',5),(70,'阿拉善盟',5),(71,'沈阳',6),(72,'大连',6),(73,'鞍山',6),(74,'抚顺',6),(75,'本溪',6),(76,'丹东',6),(77,'锦州',6),(78,'营口',6),(79,'阜新',6),(80,'辽阳',6),(81,'盘锦',6),(82,'铁岭',6),(83,'朝阳',6),(84,'葫芦岛',6),(85,'长春',7),(86,'吉林',7),(87,'四平',7),(88,'辽源',7),(89,'通化',7),(90,'白山',7),(91,'松原',7),(92,'白城',7),(93,'延边',7),(94,'哈尔滨',8),(95,'齐齐哈尔',8),(96,'鸡西',8),(97,'鹤岗',8),(98,'双鸭山',8),(99,'大庆',8),(100,'伊春',8),(101,'佳木斯',8),(102,'七台河',8),(103,'牡丹江',8),(104,'黑河',8),(105,'绥化',8),(106,'大兴安岭',8),(107,'黄浦区',9),(108,'卢湾区',9),(109,'徐汇区',9),(110,'长宁区',9),(111,'静安区',9),(112,'普陀区',9),(113,'闸北区',9),(114,'虹口区',9),(115,'杨浦区',9),(116,'闵行区',9),(117,'宝山区',9),(118,'嘉定区',9),(119,'浦东新区',9),(120,'金山区',9),(121,'松江区',9),(122,'青浦区',9),(123,'南汇区',9),(124,'奉贤区',9),(125,'崇明县',9),(126,'南京',10),(127,'无锡',10),(128,'徐州',10),(129,'常州',10),(130,'苏州',10),(131,'南通',10),(132,'连云港',10),(133,'淮安',10),(134,'盐城',10),(135,'扬州',10),(136,'镇江',10),(137,'泰州',10),(138,'宿迁',10),(139,'杭州',11),(140,'宁波',11),(141,'温州',11),(142,'嘉兴',11),(143,'湖州',11),(144,'绍兴',11),(145,'金华',11),(146,'衢州',11),(147,'舟山',11),(148,'台州',11),(149,'丽水',11),(150,'合肥',12),(151,'芜湖',12),(152,'蚌埠',12),(153,'淮南',12),(154,'马鞍山',12),(155,'淮北',12),(156,'铜陵',12),(157,'安庆',12),(158,'黄山',12),(159,'滁州',12),(160,'阜阳',12),(161,'宿州',12),(162,'巢湖',12),(163,'六安',12),(164,'亳州',12),(165,'池州',12),(166,'宣城',12),(167,'福州',13),(168,'厦门',13),(169,'莆田',13),(170,'三明',13),(171,'泉州',13),(172,'漳州',13),(173,'南平',13),(174,'龙岩',13),(175,'宁德',13),(176,'南昌',14),(177,'景德镇',14),(178,'萍乡',14),(179,'九江',14),(180,'新余',14),(181,'鹰潭',14),(182,'赣州',14),(183,'吉安',14),(184,'宜春',14),(185,'抚州',14),(186,'上饶',14),(187,'济南',15),(188,'青岛',15),(189,'淄博',15),(190,'枣庄',15),(191,'东营',15),(192,'烟台',15),(193,'潍坊',15),(194,'济宁',15),(195,'泰安',15),(196,'威海',15),(197,'日照',15),(198,'莱芜',15),(199,'临沂',15),(200,'德州',15),(201,'聊城',15),(202,'滨州',15),(203,'荷泽',15),(204,'郑州',16),(205,'开封',16),(206,'洛阳',16),(207,'平顶山',16),(208,'安阳',16),(209,'鹤壁',16),(210,'新乡',16),(211,'焦作',16),(212,'濮阳',16),(213,'许昌',16),(214,'漯河',16),(215,'三门峡',16),(216,'南阳',16),(217,'商丘',16),(218,'信阳',16),(219,'周口',16),(220,'驻马店',16),(221,'武汉',17),(222,'黄石',17),(223,'十堰',17),(224,'宜昌',17),(225,'襄樊',17),(226,'鄂州',17),(227,'荆门',17),(228,'孝感',17),(229,'荆州',17),(230,'黄冈',17),(231,'咸宁',17),(232,'随州',17),(233,'恩施',17),(234,'神农架',17),(235,'长沙',18),(236,'株洲',18),(237,'湘潭',18),(238,'衡阳',18),(239,'邵阳',18),(240,'岳阳',18),(241,'常德',18),(242,'张家界',18),(243,'益阳',18),(244,'郴州',18),(245,'永州',18),(246,'怀化',18),(247,'娄底',18),(248,'湘西',18),(249,'广州',19),(250,'韶关',19),(251,'深圳',19),(252,'珠海',19),(253,'汕头',19),(254,'佛山',19),(255,'江门',19),(256,'湛江',19),(257,'茂名',19),(258,'肇庆',19),(259,'惠州',19),(260,'梅州',19),(261,'汕尾',19),(262,'河源',19),(263,'阳江',19),(264,'清远',19),(265,'东莞',19),(266,'中山',19),(267,'潮州',19),(268,'揭阳',19),(269,'云浮',19),(270,'南宁',20),(271,'柳州',20),(272,'桂林',20),(273,'梧州',20),(274,'北海',20),(275,'防城港',20),(276,'钦州',20),(277,'贵港',20),(278,'玉林',20),(279,'百色',20),(280,'贺州',20),(281,'河池',20),(282,'来宾',20),(283,'崇左',20),(284,'海口',21),(285,'三亚',21),(286,'重庆',22),(287,'万州区',22),(288,'涪陵区',22),(289,'渝中区',22),(290,'大渡口区',22),(291,'江北区',22),(292,'沙坪坝区',22),(293,'九龙坡区',22),(294,'南岸区',22),(295,'北碚区',22),(296,'万盛区',22),(297,'双桥区',22),(298,'渝北区',22),(299,'巴南区',22),(300,'黔江区',22),(301,'长寿区',22),(302,'綦江县',22),(303,'潼南县',22),(304,'铜梁县',22),(305,'大足县',22),(306,'荣昌县',22),(307,'璧山县',22),(308,'梁平县',22),(309,'城口县',22),(310,'丰都县',22),(311,'垫江县',22),(312,'武隆县',22),(313,'忠县',22),(314,'开县',22),(315,'云阳县',22),(316,'奉节县',22),(317,'巫山县',22),(318,'巫溪县',22),(319,'石柱土家族自治县',22),(320,'秀山土家族苗族自治县',22),(321,'酉阳土家族苗族自治县',22),(322,'彭水苗族土家族自治县',22),(323,'江津',22),(324,'合川',22),(325,'永川',22),(326,'南川',22),(327,'成都',23),(328,'自贡',23),(329,'攀枝花',23),(330,'泸州',23),(331,'德阳',23),(332,'绵阳',23),(333,'广元',23),(334,'遂宁',23),(335,'内江',23),(336,'乐山',23),(337,'南充',23),(338,'眉山',23),(339,'宜宾',23),(340,'广安',23),(341,'达州',23),(342,'雅安',23),(343,'巴中',23),(344,'资阳',23),(345,'阿坝',23),(346,'甘孜',23),(347,'凉山',23),(348,'贵阳',24),(349,'六盘水',24),(350,'遵义',24),(351,'安顺',24),(352,'铜仁',24),(353,'黔西南',24),(354,'毕节',24),(355,'黔东南',24),(356,'黔南',24),(357,'昆明',25),(358,'曲靖',25),(359,'玉溪',25),(360,'保山',25),(361,'昭通',25),(362,'丽江',25),(363,'思茅',25),(364,'临沧',25),(365,'楚雄',25),(366,'红河',25),(367,'文山',25),(368,'西双版纳',25),(369,'大理',25),(370,'德宏',25),(371,'怒江',25),(372,'迪庆',25),(373,'拉萨',26),(374,'昌都',26),(375,'山南',26),(376,'日喀则',26),(377,'那曲',26),(378,'阿里',26),(379,'林芝',26),(380,'西安',27),(381,'铜川',27),(382,'宝鸡',27),(383,'咸阳',27),(384,'渭南',27),(385,'延安',27),(386,'汉中',27),(387,'榆林',27),(388,'安康',27),(389,'商洛',27),(390,'兰州',28),(391,'嘉峪关',28),(392,'金昌',28),(393,'白银',28),(394,'天水',28),(395,'武威',28),(396,'张掖',28),(397,'平凉',28),(398,'酒泉',28),(399,'庆阳',28),(400,'定西',28),(401,'陇南',28),(402,'临夏',28),(403,'甘南',28),(404,'西宁',29),(405,'海东',29),(406,'海北',29),(407,'黄南',29),(408,'海南',29),(409,'果洛',29),(410,'玉树',29),(411,'海西',29),(412,'银川',30),(413,'石嘴山',30),(414,'吴忠',30),(415,'固原',30),(416,'中卫',30),(417,'乌鲁木齐',31),(418,'克拉玛依',31),(419,'吐鲁番',31),(420,'哈密',31),(421,'昌吉',31),(422,'博尔塔拉',31),(423,'巴音郭楞',31),(424,'阿克苏',31),(425,'克孜勒苏',31),(426,'喀什',31),(427,'和田',31),(428,'伊犁',31),(429,'塔城',31),(430,'阿勒泰',31),(431,'石河子',31),(432,'阿拉尔',31),(433,'图木舒克',31),(434,'五家渠',31),(435,'香港',32),(436,'澳门',33),(437,'台湾',34); /*Table structure for table `t_province` */ DROP TABLE IF EXISTS `t_province`; CREATE TABLE `t_province` ( `pid` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) DEFAULT NULL, PRIMARY KEY (`pid`) ) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8; /*Data for the table `t_province` */ insert into `t_province`(`pid`,`name`) values (1,'北京'),(2,'天津'),(3,'河北'),(4,'山西'),(5,'内蒙古'),(6,'辽宁'),(7,'吉林'),(8,'黑龙江'),(9,'上海'),(10,'江苏'),(11,'浙江'),(12,'安徽'),(13,'福建'),(14,'江西'),(15,'山东'),(16,'河南'),(17,'湖北'),(18,'湖南'),(19,'广东'),(20,'广西'),(21,'海南'),(22,'重庆'),(23,'四川'),(24,'贵州'),(25,'云南'),(26,'西藏'),(27,'陕西'),(28,'甘肃'),(29,'青海'),(30,'宁夏'),(31,'新疆'),(32,'香港'),(33,'澳门'),(34,'台湾'); /*!40101 SET SQL_MODE=@OLD_SQL_MODE */; /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
扫一扫
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
