ajax + servlet cities and counties achieve three linkage (with database)

Creating an entity class

omitted set / get

**
 * 行政区域县区信息表(TbAreas)实体类
 *
 */
public class TbAreas implements Serializable {
    private static final long serialVersionUID = 804755290838802035L;
    /**
    * 区域ID
    */
    private String areaid;
    /**
    * 区域名称
    */
    private String area;
}
public class TbCities implements Serializable {
    private static final long serialVersionUID = 335480473685555694L;
    /**
    * 城市ID
    */
    private String cityid;
    /**
    * 城市名称
    */
    private String city;
}
public class TbProvinces implements Serializable {
    private static final long serialVersionUID = -40667232618289266L;
    /**
    * 省份ID
    */
    private String provinceid;
    /**
    * 省份名称
    */
    private String province;
}
public class Pizze {
    private List<TbProvinces> provinces;
    private List<TbCities> cities;
    private List<TbAreas> areas;
}
/*

这是用来组合集合的
*/

servlet

@WebServlet("/three")
public class ThreeServlet extends HttpServlet {
    private ThreeUnionService threeUnionService = new ThreeUnionServiceImpl();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        String proid = req.getParameter("proid");
        String cityid = req.getParameter("cityid");
        String method = req.getParameter("method");
        switch (method){
            case "getAllPro":
                List<TbProvinces> allpro = threeUnionService.getAllpro();
                List<TbCities> allCitys = threeUnionService.getAllCitys(Integer.parseInt("110000"));
                List<TbAreas> allTbAreas = threeUnionService.getAllTbAreas(Integer.parseInt("110100"));
                Pizze pizze = new Pizze(allpro, allCitys, allTbAreas);
                String s = JSON.toJSONString(pizze);
                resp.getWriter().write(s);
                break;
            case "getAllCitys":
                List<TbCities> allCitys1 = threeUnionService.getAllCitys(Integer.parseInt(proid));
                System.out.println(proid.substring(0,3)+"100");
                List<TbAreas> allTbAreas1 = threeUnionService.getAllTbAreas(Integer.parseInt(proid.substring(0,3)+"100"));
                Pizze pizze1 = new Pizze(null, allCitys1, allTbAreas1);
                String s1 = JSON.toJSONString(pizze1);
                resp.getWriter().write(s1);
                break;
            case "getArea":
                List<TbAreas> allTbAreas2 = threeUnionService.getAllTbAreas(Integer.parseInt(cityid));
                String s2 = JSON.toJSONString(allTbAreas2);
                resp.getWriter().write(s2);
                break;
            default:
        }
    }
}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.12.1.js"></script>
    <script type="text/javascript">
        $(function () {
                //第一次初始化数据显示所有省,第一个省的所有市,第一个市的所有县
                $.ajax({
                    type:'post',
                    url:'/three',
                    data:'method=getAllPro',
                    dataType:'json',
                    success:function (data) {
                        count=""
                        for (var i = 0; i < data.provinces.length; i++) {
                            count+="<option id="+data.provinces[i].provinceid+">"+data.provinces[i].province+"</option>"
                        }
                        $("#pro").html(count)

                        count=""
                        for (var i = 0; i < data.cities.length; i++) {
                            count+="<option id="+data.cities[i].cityid+">"+data.cities[i].city+"</option>"
                        }
                        $("#shi").html(count)


                        count=""
                        for (var i = 0; i < data.areas.length; i++) {
                            count+="<option id="+data.areas[i].areaid+">"+data.areas[i].area+"</option>"
                        }
                        $("#xian").html(count)
                    },
                    error:function () {
                        alert(2222)
                    }
                })

             })

       $(function () {
           //当监听到省发生改变发生,得到对应省的所有市,同时显示第一个市的所有县
           $("#pro").change(function () {
               var id = $(this).find("option:checked").attr("id")
               $.ajax({
                   type:'post',
                   url:'/three',
                   data:'method=getAllCitys&proid='+id,
                   dataType:'json',
                   success:function (data) {
                       //显示对应的市
                       count=""
                       for (var i = 0; i < data.cities.length; i++) {
                           count+="<option id="+data.cities[i].cityid+">"+data.cities[i].city+"</option>"
                       }
                       $("#shi").html(count)


                       count=""
                       for (var i = 0; i < data.areas.length; i++) {
                           count+="<option id="+data.areas[i].areaid+">"+data.areas[i].area+"</option>"
                       }
                       $("#xian").html(count)
                   }
               })
           })
       })
        $(function () {
            //当监听到市发生改变去找他对应的所有县
            $("#shi").change(function () {
                var id = $("#shi").find("option:checked").attr("id")
                $.ajax({
                    type:'post',
                    url:"/three",
                    data:'method=getArea&cityid='+id,
                    dataType:'json',
                    success:function (data) {
                        var count=""
                        for (var i = 0; i < data.length; i++) {
                            count+="<option id="+data[i].areaid+">"+data[i].area+"</option>"
                        }
                        $("#xian").html(count)
                    }
                })
            })
        })
    </script>
    <title>三级联动</title>
</head>
<body>
<h2> 三级联动</h2><select name="" id="pro">

</select><select name="" id="shi">

</select>
县/区 <select name="" id="xian">
</select>
</body>
</html>

jdbc code is not posted, it is saved to the collection you can search the database according to id

If you have questions you want to master treatise, brother first thanked

Attached database

Baidu cloud disk

Extraction code: 2eaz

Released three original articles · won praise 0 · Views 92

Guess you like

Origin blog.csdn.net/weixin_43800829/article/details/105323273