简介：
首先下面是需要用到的xml文档数据；
https://www.cnblogs.com/0099-ymsml/p/16092696.html
需要展示的功能就是两个选择栏，一个选择省份名称，第二个选择城市名称；
必然地，首先需要选择了省份名称才能选择城市名称。
首先是两个servlet.java：
第一个获取省份名称的PServlet.java（GET请求）:
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.*;
@WebServlet("/PServlet")
public class PServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/**
* 响应所有省份名称，使用逗号分割
*/
try {
// 创建解析器
SAXReader reader = new SAXReader();
// 解析xml得到doc对象
Document doc = reader.read("D:\\SoftWare\\SoftWareFiles\\EclipsProject\\AjaxDemo\\PCProject\\src\\main\\webapp\\PCXML.xml");
List<Attribute> ele = doc.selectNodes("//province/@name");
System.out.print(ele.get(1).getText());
String str = "";
for (int x = 0; x < ele.size(); x++) {
str += ele.get(x).getText();
if (x != ele.size()-1) { // 如果不是最后一位就在后面加上“-”
str += "-";
}
}
System.out.print(ele.get(0).getText());
// 发送数据
response.getWriter().print(str);
} catch (
DocumentException e) {
e.printStackTrace();
}
}
}
然后是通过客户端点击的省份名称去获取城市名称的CServler.java（POST请求）:
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
@WebServlet("/CServlet")
public class CServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
/**
* 获取省份名称，加载省份对应的<province>元素 把元素转换为字符串发送给客户端
*/
try {
// 创建解析器
SAXReader reader = new SAXReader();
// 解析xml得到doc对象
Document doc = reader.read("D:\\SoftWare\\SoftWareFiles\\EclipsProject\\AjaxDemo\\PCProject\\src\\main\\webapp\\PCXML.xml");
// 得到<cities> 根节点
Element rootElement = doc.getRootElement();
// 省份元素列表
List<Element> pEle = rootElement.elements("province");
// 获取传过来的省份名称
String pName = request.getParameter("pName");
// 匹配省名称
Element province = (Element)doc.selectSingleNode("//province[@name='" + pName + "']");
// 将查询到的<province>标签的xml转换为字符串
String proXML = province.asXML();
// 发送数据
response.getWriter().print(proXML); // 此时为xml形式的字符串，需要修改setContentType的内容
} catch (Exception e) {
e.printStackTrace();
}
}
}
然后就是前端代码文件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PC</title>
<script>
// 当页面加载完成后,向id="province"中添加省份的名称
window.onload = function() {
// 获取province
var pro = document.getElementById("province");
// 获取city
var city = document.getElementById("city");
// 创建异步对象
var xp = new XMLHttpRequest();
// 打开连接
xp.open("GET", "/PCProject/PServlet", true);
// 发送请求
xp.send();
// 监听事件：onreadystatechange:当状态发送变化时
xp.onreadystatechange = function() {
var option = "<option id='opt'>====== Please choose the province ======</option>";
// 双重判断
if (xp.readyState == 4 && xp.status == 200) {
// 接收的响应内容
var text = xp.responseText;
var pName = text.split("-");
for (var i = 0; i < pName.length; i++) {
option += "<option id='" + pName[i] + "'>" + pName[i]
+ "</option>";
}
}
// 插入到省名称
pro.innerHTML = option;
};
pro.onchange = function() {
// 获取province
var pro = document.getElementById("province");
// 创建异步对象
var xpp = new XMLHttpRequest();
// 打开连接
xpp.open("POST", "/PCProject/CServlet", true);
// 设置请求头
xpp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 发送请求：pro是<province>标签 pro.value是下拉列表的值
xpp.send("pName=" + pro.options[pro.selectedIndex].text);
// 设置city开头
var optionCity = "<option>======  Please choose the city  ======</option>";
xpp.onreadystatechange = function() {
if (xpp.readyState == 4 && xpp.status == 200) {
// 响应的xml格式的内容
var doc = xpp.responseXML;
// 获取item下的内容 返回Element
var cName = doc.getElementsByTagName("item");
// 遍历ELement元素
for (var i = 0; i < cName.length; i++) {
optionCity += "<option id='" + cName[i].textContent + "'>"
+ cName[i].textContent + "</option>";
}
}
// 插入文本
city.innerHTML = optionCity;
};
};
};
</script>
</head>
<body>
<table border="1" style="width: 50%; height: 50px; float: left;">
<tr>
<th style="font-size: 50px;color:skyblue" >请选择省份</th>
<th style="font-size: 50px;color:skyblue">请选择城市</th>
</tr>
<tr>
<td><select id="province" style="font-size: 50px">
</select>
</td>
<td>
<select id="city" style="font-size: 50px">
<option>======  Please choose the city  ======</option>
</select>
</tr>
</table>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）