AjAX+SSH实现省份下拉菜单

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

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<% @H_404_21@String path = @H_404_21@request.getContextPath(); @H_404_21@String basePath = @H_404_21@request.getScheme() + "://" + @H_404_21@request.getServerName() + ":" + @H_404_21@request.getServerPort() + path; %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=@H_403_45@"en">
<head>
<Meta charset=@H_403_45@"UTF-8">
<Meta name=@H_403_45@"viewport" content=@H_403_45@"width=device-width,initial-scale=1" />
<title>中介门店注册</title>
<link rel=@H_403_45@"stylesheet" type=@H_403_45@"text/css" href=@H_403_45@"static/css/messageProtect.css" />
<link rel=@H_403_45@"stylesheet" type=@H_403_45@"text/css" href=@H_403_45@"static/css/reset.css" />

<link rel=@H_403_45@"stylesheet" type=@H_403_45@"text/css" href=@H_403_45@"static/lib/laydate/need/laydate.css" />
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/js/jquery-3.1.1.min.js"></script>
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/lib/laydate/laydate.js"></script>
<script src=@H_403_45@"static/js/city2.js"></script>
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/js/citySelect2.js"></script>
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/js/messageProtect.js"></script>
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/js/plugIn.js"></script>
<script type=@H_403_45@"text/javascript" src=@H_403_45@"static/js/jquery.validate.js"></script>
<!-- 测试使用 -->
<script type=@H_403_45@"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 = @H_404_21@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 = @H_404_21@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=@H_403_45@"main-content">
        <div class=@H_403_45@"basic-information">
            <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中介门店注册</strong>
            <form class=@H_403_45@"form-Box" id=@H_403_45@"form-Box" action=@H_403_45@"shop_register" method=@H_403_45@"post" enctype=@H_403_45@"multipart/form-data">
                    <label class=@H_403_45@"form-label">所在地<b>*</b></label> <select id=@H_403_45@"province" name=@H_403_45@"province" class=@H_403_45@"form-input file-pic">
                        <option value=@H_403_45@"">请选择</option>
                        <c:forEach var=@H_403_45@"p" items=@H_403_45@"${provinces}">
                            <option value=@H_403_45@"${p.cityId }">${p.cityName }</option>
                        </c:forEach>
                    </select> <select id=@H_403_45@"market" name=@H_403_45@"market" class=@H_403_45@"form-input file-pic">
                        <option value=@H_403_45@"">请选择</option>
                    </select> <select id=@H_403_45@"area" name=@H_403_45@"area" class=@H_403_45@"form-input file-pic">
                        <option value=@H_403_45@"">请选择</option>
                    </select>
                </div>
                <div class=@H_403_45@"btn">
                    <input type=@H_403_45@"submit" class=@H_403_45@"btn1" value=@H_403_45@"申请加盟"> <font  color=@H_403_45@"red">&nbsp;&nbsp;${data}</font>
                </div>
            </form>
        </div>
    </div>

</body>
</html>

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

/** * 当用户点击首页门店注册进行跳转 *@H_404_658@ @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异步获取后台数据的：

/** *市区联动动态菜单 *@H_404_658@ @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 @H_404_21@List<@H_404_21@Map<@H_404_21@String,@H_404_21@String>> findCityAreaByShi(@H_404_21@String shengOrShi) {
        @H_404_21@String hql = "from CountryProvinceInfo cp where cp.upCityId = '" + shengOrShi + "'";
        @H_404_21@List<CountryProvinceInfo> cpList = baseDao@H_404_21@.findByHql(hql);

        @H_404_21@List<@H_404_21@Map<@H_404_21@String,@H_404_21@String>> lmList = new ArrayList<>();
        if (cpList@H_404_21@.size()>0) {
            for (CountryProvinceInfo countryProvinceInfo : cpList) {
                @H_404_21@Map<@H_404_21@String,@H_404_21@String> cityMenu = new HashMap<>();
// String cityName = countryProvinceInfo.getCityName();
// String cityId = countryProvinceInfo.getCityId();
                cityMenu@H_404_21@.put("cityId",countryProvinceInfo@H_404_21@.getCityId());
                cityMenu@H_404_21@.put("cityName",countryProvinceInfo@H_404_21@.getCityName());
                lmList@H_404_21@.add(cityMenu);
            }
        } else {
            @H_404_21@String shiHQL = "from CountryProvinceInfo cp where cp.cityId = '"+shengOrShi+"'";
            CountryProvinceInfo cp = (CountryProvinceInfo) baseDao@H_404_21@.loadObject(shiHQL);
            @H_404_21@Map<@H_404_21@String,@H_404_21@String> cityMenu = new HashMap<>();
            cityMenu@H_404_21@.put("cityId",cp@H_404_21@.getCityId());
            cityMenu@H_404_21@.put("cityName",cp@H_404_21@.getCityName());
            lmList@H_404_21@.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;
    }

数据表结构：

效果图

AjAX+SSH实现省份下拉菜单

猜你在找的Ajax相关文章