省市区三级联动

2020-08-02

字数统计: 920字 | 阅读时长: 5分

阅读量

JSP+Servlet实现省市区三级联动

1、location.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/juqery.js"></script>
    <script type="text/javascript">
        $(function () {
            //省市联动
            $("#province").change(function () {
                var id = $(this).val(); /*获取value值*/
                $.ajax({
                    url:'/location',
                    type:'POST',
                    dataType:'JSON',
                    data:{
                        id:id,
                        type:"province"
                    },
                    success:function (data) {
                        /*城市添加*/
                        var content = "";
                        var cities = data.cities;
                        for (var i=0;i<cities.length;i++){
                            content += "<option>"+cities[i]+"</option>";
                        }
                        $("#city").html(content);

                        /*区域添加*/
                        var content = "";
                        var areas = data.areas;
                        for (var i=0;i<areas.length;i++){
                            content += "<option>"+areas[i]+"</option>";
                        }
                        $("#area").html(content);
                    }
                });
            });
            //城市-区县联动
            $("#city").change(function () {
                var id = $(this).val(); /*获取value值*/
                $.ajax({
                    url:'/location',
                    type:'POST',
                    dataType:'JSON',
                    data:{
                        id:id,
                        type:"city"
                    },
                    success:function (data) {
                        var content = "";
                        for (var i=0;i<data.length;i++){
                            content += "<option>"+data[i]+"</option>";
                        }
                        $("#area").html(content);
                    }
                });
            });
        });
    </script>
</head>
<body>
    省：<select id="province">
        <option>--请选择--</option>
        <option value="陕西省">陕西省</option>
        <option value="河南省">河南省</option>
        <option value="江苏省">江苏省</option>
    </select>
    市：<select id="city">
        <option>--请选择--</option>
    </select>
    区：<select id="area">
        <option>--请选择--</option>
    </select>
    <input type="submit" value="提交" id="btn"/>
</body>
</html>

2、Location.java

package com.huan.entity;

import java.util.List;

public class Location {
    private List<String> cities;
    private List<String> areas;

    public List<String> getCities() {
        return cities;
    }

    public void setCities(List<String> cities) {
        this.cities = cities;
    }

    public List<String> getAreas() {
        return areas;
    }

    public void setAreas(List<String> areas) {
        this.areas = areas;
    }
}

3、LocationServlet.java

package com.huan.servlet;

import com.huan.entity.Location;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

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.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/location")
public class LocationServlet extends HttpServlet {
    private static Map<String, List<String>> cityMap;
    private static Map<String, List<String>> provinceMap;
    static {
        provinceMap = new HashMap<>();
        List<String> citys = new ArrayList<>();
        citys.add("西安市");
        citys.add("宝鸡市");
        citys.add("渭南市");
        provinceMap.put("陕西省",citys);
        citys = new ArrayList<>();
        citys.add("郑州市");
        citys.add("洛阳市");
        citys.add("开封市");
        provinceMap.put("河南省",citys);
        citys = new ArrayList<>();
        citys.add("无锡市");
        citys.add("苏州市");
        citys.add("南京市");
        provinceMap.put("江苏省",citys);


        cityMap = new HashMap<>();
        List<String> areas = new ArrayList<>();
        areas.add("雁塔区");
        areas.add("莲湖区");
        areas.add("新城区");
        cityMap.put("西安市",areas);
        areas = new ArrayList<>();
        areas.add("陈仓区");
        areas.add("渭滨区");
        areas.add("新城区");
        cityMap.put("宝鸡市",areas);
        areas = new ArrayList<>();
        areas.add("临渭区");
        areas.add("高新区");
        cityMap.put("渭南市",areas);
        areas = new ArrayList<>();
        areas.add("洛阳A区");
        areas.add("洛阳B区");
        cityMap.put("洛阳市",areas);
        areas = new ArrayList<>();
        areas.add("无锡1区");
        areas.add("无锡2区");
        areas.add("无锡3区");
        areas.add("无锡4区");
        areas.add("无锡5区");
        areas.add("无锡6区");
        cityMap.put("无锡市",areas);
        areas = new ArrayList<>();
        areas.add("南京1区");
        areas.add("南京2区");
        cityMap.put("南京市",areas);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("UTF-8");
        String type = req.getParameter("type");
        String id = req.getParameter("id");
        switch (type){
            case "province":
                List<String> citys = provinceMap.get(id);
                String city = citys.get(0);  /*拿到map集合中的第一个城市*/
                List<String> cityAreas = cityMap.get(city);  /*根据第一个城市找到对应的区，实现三级联动*/
                Location location = new Location();
                location.setCities(citys);
                location.setAreas(cityAreas);
                JSONObject jsonObject = JSONObject.fromObject(location); /*对象用JSONObject转*/
                resp.getWriter().write(jsonObject.toString());
                break;
            case "city":
                List<String> areas = cityMap.get(id);
                JSONArray jsonArray = JSONArray.fromObject(areas); /*集合用JSONArray转*/
                resp.getWriter().write(jsonArray.toString());
                break;
        }
    }
}