利用Ajax技术实现级联列表。

最新推荐文章于 2024-02-03 22:59:38 发布

enen_wadasd

最新推荐文章于 2024-02-03 22:59:38 发布

阅读量230

点赞数

分类专栏： javaWEB 文章标签： servlet java html 前端

本文链接：https://blog.csdn.net/weixin_52360960/article/details/127651803

版权

javaWEB 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

当在第一个列表框中输入省名时，在第二个列表框中显示该省包含的城市。

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);
    }
}