AjAX+SSH实现省份下拉菜单

来源：互联网发布：软件流程图模板编辑：程序博客网时间：2024/05/24 03:24

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中介门店注册</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">&nbsp;&nbsp;${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;    }

数据表结构：

数据表局部

效果图

0 0