AjAX+SSH实现省份下拉菜单

怼烎@ 2022-09-29 12:54 90阅读 0赞

java环境下实现省份下拉菜单，直接上代码：

Jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
    <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path; %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>中介门店注册</title>
    <link rel="stylesheet" type="text/css" href="static/css/messageProtect.css" />
    <link rel="stylesheet" type="text/css" href="static/css/reset.css" />
    
    <link rel="stylesheet" type="text/css" href="static/lib/laydate/need/laydate.css" />
    <script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="static/lib/laydate/laydate.js"></script>
    <script src="static/js/city2.js"></script>
    <script type="text/javascript" src="static/js/citySelect2.js"></script>
    <script type="text/javascript" src="static/js/messageProtect.js"></script>
    <script type="text/javascript" src="static/js/plugIn.js"></script>
    <script type="text/javascript" src="static/js/jquery.validate.js"></script>
    
    <script type="text/javascript"> $(document).ready(function(){ //省市区ajax请求，首先利用ajax获取省份，然后通过省份获取市和区。 $("#province").change( var pId = $("#province").val();//获取dom中通过后台获取的省份 $("#market").empty(); $.post("menu_list_city_area",//使用post请求方式 { "shengOrShi":pId //将获取的省份传给后台 }, function(data){ //回调函数 var data = eval('('+ data +')'); for(var i=0;i<data.root.length;i++){ $("<option value='"+data.root[i].cityId+"'>"+data.root[i].cityName+"</option> ").appendTo($("#market")) //将返回的市添加到标签中 } changeMarket();//调用通过市查询区的函数 }); }) function changeMarket(){ //通过市查询区 var pId = $("#market").val(); //获取 $("#area").empty(); $.post("menu_list_city_area", //获取后台的区 { "shengOrShi":pId //将市传过去 }, function(data){ var data = eval('('+ data +')'); for(var i=0;i<data.root.length;i++){ $("<option value='"+data.root[i].cityId+"'>"+data.root[i].cityName+"</option> ").appendTo($("#area")); } }); } $("#market").change(function(){ changeMarket(); }) }); </script>
    </head>
    <body>
        <div class="main-content">
            <div class="basic-information">
                <strong>            中介门店注册</strong>
                <form class="form-box" id="form-box" action="shop_register" method="post" enctype="multipart/form-data">
                        <label class="form-label">所在地<b>*</b></label> <select id="province" name="province" class="form-input file-pic">
                            <option value="">请选择</option>
                            <c:forEach var="p" items="${provinces}">
                                <option value="${p.cityId }">${p.cityName }</option>
                            </c:forEach>
                        </select> <select id="market" name="market" class="form-input file-pic">
                            <option value="">请选择</option>
                        </select> <select id="area" name="area" class="form-input file-pic">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="btn">
                        <input type="submit" class="btn1" value="申请加盟"> <font color="red">  ${data}</font>
                    </div>
                </form>
            </div>
        </div>
    
    </body>
    </html>

Controller层：  
这段代码是当请求这个jsp页面的时候将所有的省份传给前台页面的：

/** * 当用户点击首页门店注册进行跳转 * @return */
        @RequestMapping("/shop_regs")
        public String shopReg(Model model){
             List<CountryProvinceInfo> findAllProvince = houseService.findAllProvince(); //通过service层方法获取省份List
             model.addAttribute("provinces", findAllProvince);//传给前台页面
            return "login/shop_regs";
        }

这个Controller是ajax异步获取后台数据的：

/** *市区联动动态菜单 * @return */
        @ResponseBody
        @RequestMapping("/menu_list_city_area")
        public void getCityAreaMenu(String shengOrShi) {
            List<Map<String, String>> lmList = houseService.findCityAreaByShi(shengOrShi);
            this.outListString(lmList);
        }

Service层代码：

@Override
        //加载所有省
        public List<CountryProvinceInfo> findAllProvince() {
            List<CountryProvinceInfo> allProvince = baseDao.findByHql("from CountryProvinceInfo where cityLevel='省'");
            return allProvince;
        }

/** *市区联动动态菜单 * @return */
        @Override
        public List<Map<String, String>> findCityAreaByShi(String shengOrShi) {
            String hql = "from CountryProvinceInfo cp where cp.upCityId = '" + shengOrShi + "'";
            List<CountryProvinceInfo> cpList = baseDao.findByHql(hql);
    
            List<Map<String, String>> lmList = new ArrayList<>();
            if (cpList.size()>0) {
                for (CountryProvinceInfo countryProvinceInfo : cpList) {
                    Map<String,String> cityMenu = new HashMap<>();
    // String cityName = countryProvinceInfo.getCityName();
    // String cityId = countryProvinceInfo.getCityId();
                    cityMenu.put("cityId", countryProvinceInfo.getCityId());
                    cityMenu.put("cityName", countryProvinceInfo.getCityName());
                    lmList.add(cityMenu);
                }
            } else {
                String shiHQL = "from CountryProvinceInfo cp where cp.cityId = '"+shengOrShi+"'";
                CountryProvinceInfo cp = (CountryProvinceInfo) baseDao.loadObject(shiHQL);
                Map<String,String> cityMenu = new HashMap<>();
                cityMenu.put("cityId", cp.getCityId());
                cityMenu.put("cityName", cp.getCityName());
                lmList.add(cityMenu);
            }
            return lmList;
        }

Dao层：

/** 查询指定类的满足条件的持久化对象 */
        public List findByHql(String hql) {
            try {
                final String hql1 = hql;
                return getHibernateTemplate().find(hql1);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

数据表结构：  
![数据表结构][SouthEast]

![数据表局部][SouthEast 1]

效果图

![效果图][SouthEast 2]

[SouthEast]: /images/20220708/227875d153df4818891672fa3923c731.png
[SouthEast 1]: /images/20220708/04d74b5894294b9a9d12db2a54327ff2.png
[SouthEast 2]: /images/20220708/6e978391655148579f01cc46d10e0aea.png