省市三级联动
一.创建javaBean文件:
二.
1 package com.werner.dom4; 2 3 import org.dom4j.Attribute; 4 import org.dom4j.Document; 5 import org.dom4j.DocumentException; 6 import org.dom4j.Element; 7 import org.dom4j.io.SAXReader; 8 9 import java.util.ArrayList; 10 import java.util.List; 11 12 public class XmlUtils { 13 private Document document; 14 15 public XmlUtils() { 16 init(); 17 } 18 public void init(){ 19 SAXReader reader = new SAXReader(); 20 try { 21 document= reader.read(this.getClass().getClassLoader().getResourceAsStream("china.xml"));//document定义XML 文档 22 } catch (DocumentException e) { 23 e.printStackTrace(); 24 } 25 } 26 27 /** 28 * 值 可以写在两个 一个属性 在文本节点里 29 * 30 * @return 31 */ 32 public List<Province> getProvinces() { 33 //获取china元素节点 34 Element root = document.getRootElement(); 35 /** 36 * 得到所有的省的节点 37 */ 38 ArrayList<Province> provinces = new ArrayList<>(); 39 List<Element> elements = root.elements();//返回china节点包含子元素的列表(省的列表) 40 for (Element element : elements) { 41 /** 42 * 每一循环都是一个省 43 */ 44 45 List<Attribute> attributes = element.attributes();//返回省的属性列表id,name,city 46 Province province = new Province();//创建省对象 47 48 for (Attribute attribute : attributes) { 49 if (attribute.getName().equals("id")) { 50 province.setId(Integer.parseInt(attribute.getValue()));//getValue获取属性值 51 } else { 52 province.setName(attribute.getValue()); 53 } 54 55 } 56 province.setCities(getCities(element)); 57 provinces.add(province); 58 } 59 return provinces; 60 } 61 62 public List<City> getCities(Element pro_ele){ 63 ArrayList<City> cities = new ArrayList<>(); 64 List<Element> elements = pro_ele.elements(); 65 for (Element ele : elements) { 66 City city = new City(); 67 List<Attribute> attributes = ele.attributes(); 68 for (Attribute attribute : attributes) { 69 if (attribute.getName().equals("id")){ 70 city.setId(Integer.parseInt(attribute.getValue())); 71 }else { 72 city.setName(attribute.getValue()); 73 } 74 } 75 city.setCounties(getCounty(ele)); 76 cities.add(city); 77 78 } 79 return cities; 80 } 81 82 public List<County> getCounty(Element cityEle){ 83 ArrayList<County> counties = new ArrayList<>(); 84 List<Element> elements = cityEle.elements(); 85 for (Element ele : elements) { 86 County county = new County(); 87 List<Attribute> attributes = ele.attributes(); 88 for (Attribute attribute : attributes) { 89 if (attribute.getName().equals("id")){ 90 county.setId(Integer.parseInt(attribute.getValue())); 91 }else if (attribute.getName().equals("weatherCode")){ 92 county.setWeatherCode(attribute.getValue()); 93 } 94 else { 95 county.setName(attribute.getValue()); 96 } 97 } 98 counties.add(county); 99 100 } 101 return counties; 102 } 103 }
三.controller层:
1 package com.werner.dom4.controler; 2 3 import com.alibaba.fastjson.JSONObject; 4 import com.werner.dom4.Province; 5 import com.werner.dom4.XmlUtils; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.annotation.WebServlet; 9 import javax.servlet.http.HttpServlet; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 import java.io.IOException; 13 import java.util.List; 14 15 @WebServlet("/cascade") 16 public class CascadeServler extends HttpServlet { 17 XmlUtils xmlUtils= new XmlUtils(); 18 @Override 19 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 20 List<Province> provinces = xmlUtils.getProvinces(); 21 resp.setContentType("application/json;charset=utf-8"); 22 resp.getWriter().write(JSONObject.toJSONString(provinces)); 23 } 24 }
四.Html
1 <!DOCTYPE html> 2 <!--suppress JSAnnotator --> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>省市三级联动</title> 7 <style type="text/css"> 8 </style> 9 <script type="text/javascript"> 10 var data; 11 12 13 window.onload = function () { 14 //省的下拉框 15 var pro_sel = document.getElementById("province"); 16 //市 17 var city_sel = document.getElementById("city"); 18 //区县 19 var county_sel = document.getElementById("county"); 20 loadData(pro_sel); 21 22 pro_sel.onchange = function () { 23 if (this.selectedIndex > 0) { 24 //显示市的数据 25 city_sel.options.length = 1; 26 county_sel.options.length = 1; 27 var cityData = data[this.selectedIndex - 1].cities; 28 showData(city_sel, cityData); 29 } 30 }; 31 32 33 city_sel.onchange = function () { 34 //显示区县的数据 35 if (this.selectedIndex > 0) { 36 county_sel.options.length = 1; 37 var countyData = data[pro_sel.selectedIndex - 1].cities[this.selectedIndex - 1].counties; 38 showData(county_sel, countyData); 39 } 40 }; 41 42 }; 43 44 45 /** 46 * 47 * 从服务器加载数据 48 * jsp 不能局部刷新界面 49 * 50 */ 51 function loadData(sel) { 52 var xhr = new XMLHttpRequest(); 53 console.log("1"); 54 xhr.onreadystatechange = function () { 55 if (this.readyState === 4 && this.status === 200) { 56 data = JSON.parse(this.responseText); 57 //加载省的数据 58 showData(sel, data); 59 } 60 }; 61 console.log("2"); 62 xhr.open("get", "/cascade"); 63 console.log("3"); 64 xhr.send(); 65 console.log("4") 66 } 67 68 function showData(sel, data) { 69 if (data.length > 0) { 70 for (var i = 0; i < data.length; i++) { 71 var name = data[i].name; 72 var op = document.createElement("option"); 73 op.innerText = name; 74 sel.appendChild(op); 75 } 76 } 77 } 78 79 function removeSel(se) { 80 81 } 82 83 84 </script> 85 </head> 86 87 88 <!--选择省-选择市-选择区县--> 89 <!--省发生改变 清空 市 县--> 90 91 92 <body> 93 94 <select id="province"> 95 <option>请选择省</option> 96 </select> 97 98 <select id="city"> 99 <option>请选择市</option> 100 </select> 101 <select id="county"> 102 <option>请选择区(县)</option> 103 </select> 104 </body> 105 </html>
