当在第一个列表框中输入省名时,在第二个列表框中显示该省包含的城市。
main.jsp:
<%--
Created by IntelliJ IDEA.
User: ssssssbbbbbb
Date: 2022/11/2
Time: 2:53 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var httpRequest=null;
function createXHR(){
if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等
httpRequest = new XMLHttpRequest();
// console.log("XMLHttpRequest!"); //打印调试信息
}
else if(window.ActiveXObject){
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); //IE较新版本
// console.log("Msxml2.XMLHTTP!");
}
catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本
// console.log("Microsoft.XMLHTTP!");
}
catch(e){
httpRequest = null;
}
}
}
if(!httpRequest){
alert("fail to create httpRequest");
}
}
// 发送请求
function sendRequest(url, params, method, handler){
createXHR();
if(!httpRequest) return false;
httpRequest.onreadystatechange = handler;
if(method == "GET"){
httpRequest.open(method, url+ '?' + params, true);
httpRequest.send(null);
}
if(method == "POST"){
httpRequest.open(method, url, true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send(params);
}
}
function refresh(){
var p=document.getElementById("prov").value;
var city=document.getElementById("city");
if(p==""){
city.options.length=0;
city.options.add(new Option("--请选择城市--"))
}
else{
var url="../listcity";
var params="proc="+p ;
sendRequest(url,params,'POST',show);
}
}
function show(){
var city=document.getElementById("city");
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var citylist=httpRequest.responseText.split(",");
var citynum=citylist.length;
city.options.length=0;
for(i=0;i<citynum;i++)
city.options.add(new Option(citylist[i]))
}
}
}
</script>
</head>
<body>
<center>
<select name="prov" id="prov" onchange="refresh();">
<option value="">--请选择省份--</option>
<option value="山东">山东</option>
<option value="江苏">江苏</option>
<option value="广东">广东</option>
</select></br>
<select name="city" id="city">
<option>--请选择城市--</option>
</select>
</center>
</body>
</html>
CityList.java:
package servelt;
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 java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/listcity")
public class ListCity extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, String> pm = new HashMap<String, String>();
pm.put("山东", "济南,青岛,泰安,潍坊,烟台,聊城,枣庄,菏泽,莱芜,临沂");
pm.put("江苏", "南京,苏州,无锡,徐州,南通,连云港,镇江,常州,淮安,扬州");
pm.put("广东", "广州,深圳,珠海,汕头,佛山,东莞,湛江,江门,中山,惠州");
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String s1 = request.getParameter("proc");
out.print(pm.get(s1));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}