版权声明：转载请联系作者本人！！！ https://blog.csdn.net/qq_41307491/article/details/82493360
省市联动
1. 页面
<select name="province">
<option>===请选择省份===</option>
</select>
<select name="city">
<option>===请选择城市===</option>
</select>
2. ProvinceServlet:
当页面加载完毕后马上请求ProvinceServlet！
1）加载china.xml文件，把所有的省的名称使用字符串发送给客户端！
3. 页面的工作-1
将省份省份添加到<select name="province">中
1）获取ProvinceServlet发送的字符串，使用逗号分隔，得到数组
2）循环遍历每个字符串（省份的名称）。
3）使用每个字符串创建一个使用每个字符串创建一个<option>元素
4）将创建的<option>元素添加到<select name="province">这个元素中
4. CityServlet
当页面选择某个省时，请求CityServlet：
1）得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象！
2）把这个元素转换成xml字符串，发送给客户端
5. 页面的工作-2
1）把<select name="city">中的所有子元素删除，但不要删除<option>===请选择城市===</option>
2）得到服务器的响应结果：document
3）获取所有的<city>子元素，循环遍历，得到<city>的内容
4）使用每个<city>的内容创建一个<option>元素，添加到<select name="city">
ssld.jsp
//此jsp页面工作：
1）从provinceServlet中得到省份，显示在第一个下拉选择框中
2）当第一个选择框选择改变时，请求CityServlet，得到对应省份，显示在第二个下拉选择框中。
<script type="text/javascript">
/*
1. a> 在文档加载完毕时发送请求，
b> 使用ajax请求ProvinceServlet，得到所有省份名称。
c> 显示在<select name="province"/>中
*/
//得到XMLHttpRequest
//依次使用三种得到（XMLHttpRequest）方式
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("哥们儿，你用的是什么浏览器啊？");
throw e;
}
}
}
}
window.onload = function(){
//1.得到XMLHttp //2.打开连接 //3.发送请求 //4.注册监听器
var XMLHttp = createXMLHttpRequest();
XMLHttp.open("GET","<c:url value='/ProvinceServlet'/>",true)
XMLHttp.send(null);
XMLHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
//双重判断：判断是否为4状态，而且还要判断是否为200
if(XMLHttp.readyState == 4 && XMLHttp.status == 200) {
// 获取服务器的响应内容
var text = XMLHttp.responseText;
//分割逗号,返回为数组
var arr = text.split(",");
for(var i = 0; i<arr.length; i++){
//创建元素
var option = document.createElement("option");
//为option设置 value（实际值） 和text（显示值）
option.value = arr[i]; //实际值
option.appendChild(document.createTextNode(arr[i])); //显示值 将文本节点添加到option中
//将option添加到select中
document.getElementById("pro").appendChild(option);
}
}
};
/*
2. a>在选择了新的省份时，发送请求（参数为省名称），得到xml文档
b>解析xml文档，得到其中所有的<city>
c>再得到每个<city>元素的内容，即市名，
d>使用市名生成<option>，插入到<select name="city">元素中
*/
//给<select name="province">注册改变监听。
var proSelect = document.getElementById("pro") //先得到id=pro的元素
proSelect.onchange = function(){ //注册改变监听
//ajax四步请求
var XMLHttp = createXMLHttpRequest();
XMLHttp.open("POST", "<c:url value='/CityServlet'/>",true);
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttp.send("pname=" + proSelect.value); //将所选省的实际值传送给被连接的servlet，用于查询对应城市
XMLHttp.onreadystatechange = function(){
if(XMLHttp.readyState == 4 && XMLHttp.status == 200){
/*
把select中的所有option移除（除了请选择）
*/
var citySelect = document.getElementById("c");
// 获取其所有子元素
var optionEleList = citySelect.getElementsByTagName("option");
// 循环遍历每个option元素，然后在citySelect中移除
while(optionEleList.length > 1) { //子元素的个数如果大于1就循环，等于1就不循环了！
citySelect.removeChild(optionEleList[1]); //总是删除1下标，因为1删除了，2就变成1了！
}
var doc = XMLHttp.responseXML;//得到返回的xml文档
//得到文档中<city>集合
var cityEleList = doc.getElementsByTagName("city");
for(var i = 0; i < cityEleList.length; i++){
//得到集合中每个city
var cityEle = cityEleList[i];
var cityName;
//获取元素内容(cityName)，处理浏览器差异
if(window.addEventListener){
cityName = cityEle.textContent;
} else{
cityName = cityEle.text;
}
//用city创建option，添加到<select name="city">元素中
var option = document.createElement("option");
option.value = cityName;
// 创建文本节点
option.appendChild(document.createTextNode(cityName));//把文本节点追加到op元素中
//把option添加到<select>元素中
citySelect.appendChild(option);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" id="pro">
<option>===请选择省份===</option>
</select>
<select name="city" id = "c">
<option>===请选择城市===</option>
</select>
</body>ProvinceServlet
@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//加载china.xml文件，把所有的省的名称使用字符串发送给客户端
//使用dom4j操作xml文件
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
try {
// 1）创建解析器
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
// 2）调用解析器读方法，得到document
Document document = saxReader.read(input);
/*
* 查询所有province的name属性，得到属性对象 （使用xpath表达式进行查询）
*
* 循环遍历，把所有的属性值连接成一个字符串，发送给客户端
*/
List arrList = document.selectNodes("//province/@name");
//使用StringBuilder存储由属性值构成的字符串。StringBuilder是一个可变的字符序列。
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
sb.append(((Attribute) arrList.get(i)).getValue());
if(i < arrList.size() - 1){
sb.append(",");
}
}
//response向客户端输出内容
response.getWriter().print(sb);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
}
CityServlet
@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/*
* 获取省份名称，加载该省对应的<province>元素！
* 把元素转换成字符串发送给客户端
*/
/*
* 1. 获取省份的名称
* 2. 使用省份名称查找到对应的<province>元素
* 3. 把<province>元素转换成字符串，发送！
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//设置text/xml
response.setContentType("text/xml;charset=utf-8");
//得到省份名称
String pname = request.getParameter("pname");
try{
//得到解析器,得到资源流，得到document
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document document = saxReader.read(input);
//得到name属性为pname的元素
Element proEle = (Element) document.selectSingleNode("//province[@name='" + pname + "']");
//把proEle元素转换为字符串
String proStr = proEle.asXML();
//将字符串发送给客户端
response.getWriter().print(proStr);
}catch(Exception e){
throw new RuntimeException(e);
}
}
}