AjAX+SSH实现省份下拉菜单
发布时间：2020-12-16 03:30:02 所属栏目：百科 来源：网络整理
导读：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 .getContextPa
|
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层： /** * 当用户点击首页门店注册进行跳转 * @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;
}
数据表结构： 效果图 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |