JSP mysql SpringMvc下中國省市縣三級聯動下拉框
關鍵詞
JSP mysql數據庫 SpringMvc ajax Controller層 Service層 中國地區 省市縣 三級聯動 下拉框選擇
摘要
因項目需要，寫了一個省市縣三級聯動下拉框，省市縣數據由mysql數據庫調用，實現聯動查詢選擇省市縣后，將數據返回目標數據表，並且可以查看選擇結果。
功能：項目要求可以新增貨編輯商品收件人信息，其中省市縣信息可以下拉逐級選擇
基本思路：加載jsp頁面時,通過java Controller層和Service層，調用獲取全部省份，顯示省份下拉框；選擇省份后，通過change事件調用ajax，通過java Controller層和Service層，找到目標省份下的所有城市，並將數據返回給前台，市下拉框出現對應城市；選擇城市后，通過change事件調用ajax，通過java Controller層和Service層，找到目標城市下的勸募縣，並將數據返回給前台，縣下拉框出現對應縣；選擇縣后，保存數據，並將數據傳回mysql數據表union_shop.sql；同考慮一些可能出現的bug；
為了突出主題內容，以下只貼出主要代碼塊，供大家參考，個人認為重點難點在於數據傳出傳入，以及避免市縣重名的情況；歡迎大家相互交流！
正文
效果展示，如圖：
jsp部分：主要進行頁面展示，文件名--unionshop_edit.jsp，對應java Controller層提到的mv.setViewName()的路徑
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
/*javascript放在這里*/
</head>
<body>
<form action="unionshop/rest/save.do" name="Form" id="Form" method="post" enctype="multipart/form-data" onsubmit="return save();">
<input type="hidden" name="id" id="id" value="${pd.id}"/>">
<table id="table_report" class="table noline">
<tr>
<td style="width:90px;text-align: right;padding-top: 13px;"><em>*</em>所在省:</td>
<td>
//以下顯示省份下拉框
<select name="addr_province" class="addr_province" id="addr_province" >
<c:if test="${pd.addr_province != null && pd.addr_province != ''}"><option value="${pd.addr_province}" selected="selected">${pd.addr_province}</option></c:if>//數據庫有對應數據時（即編輯或查看該條數據），顯示對應數據
<c:if test="${pd.addr_province == null || pd.addr_province == ''}"><option value="請選擇省份">請選擇省份</option></c:if> //數據庫沒有對應數據時（即新建一個項目數據），顯示“請選擇省份”
//生成全部省份下拉框
<c:choose>
<c:when test="${not empty addr_province}">
<c:forEach items="${addr_province}" var="var" varStatus="vs">
<option value="${var.region_name}" >${var.region_name}</option>
</c:forEach>
</c:when>
</c:choose>
</select>
</td>
<td style="width:90px;text-align: right;padding-top: 13px;"><em>*</em>所在城市:</td>
<td>
//以下顯示城市信息
<select name="addr_city" class="addr_city" id="addr_city" >
<c:if test="${pd.addr_city != null && pd.addr_city != ''}"><option value="${pd.addr_city}" selected="selected">${pd.addr_city}</option></c:if>
<c:if test="${pd.addr_city == null || pd.addr_city == ''}"><option value="請選擇城市">請選擇城市</option></c:if>
/*這里對應的城市option標簽是由JavaScript動態生成*/
</select>
</td>
</tr>
<tr>
<td style="width:90px;text-align: right;padding-top: 13px;"><em>*</em>所在區縣:</td>
//以下顯示縣信息
<td>
<select name="addr_county" class="addr_county" id="addr_county" >
<c:if test="${pd.addr_county != null && pd.addr_county != ''}"><option value="${pd.addr_county}" selected="selected">${pd.addr_county}</option></c:if>
<c:if test="${pd.addr_county == null || pd.addr_county == ''}"><option value="請選擇縣">請選擇縣</option></c:if>
/*這里對應的縣option標簽有JavaScript自動生成*/
</select>
</td>
<td style="width:90px;text-align: right;padding-top: 13px;"><em>*</em>地址詳情:</td>
<td><input type="text" name="addr_detail" id="addr_detail" value="${pd.addr_detail}" maxlength="32" placeholder="請輸入地址詳情" title="地址詳情"/></td>
</tr>
<tr>
<td style="text-align: center;" colspan="10">
<button id="saveBtn" class="btn btn-primary" type="submit" style="width:100px">保存</button> //保存提交數據，觸發form表頭的onsubmit時間
</td> </tr> </table> </div> </form> </body> </html>
JavaScript部分：實現數據交互
<script type="text/javascript">
//保存
function save(){ //以下是當用戶未選擇省市縣是，提醒用戶 if($("#addr_province").val()=="" || $("#addr_province").val()=="請選擇省份"){ popupTip('addr_province', '請選擇省份'); return false; } if($("#addr_city").val()=="" || $("#addr_city").val()=="請選擇城市"){ popupTip('addr_city', '請選擇城市'); return false; } if($("#addr_county").val()=="" || $("#addr_county").val()=="請選擇縣"){ popupTip('addr_county', '請選擇縣'); return false; } return true //返回TRUE后，提交數據到后台 } function popupTip(field, msg){ $("#"+field).tips({ side:3, msg:msg, bg:'#AE81FF', time:2 }); $("#field").focus(); } /* 選擇省份，並展示城市 */ $(".addr_province").change(function(){ var addr_province=$(this).val(); if(addr_province=="請選擇省份"){ $(".addr_city").empty(); $(".addr_country").empty(); return false; } $(".addr_city").empty(); $(".addr_county").empty(); var ajaxObject={ url:"unionshop/rest/goSelectCity", data:{ region_name:addr_province }, success:function (data) { var str="<option>請選擇城市</option>"; for(var i=0;i<data.data.length;i++){ str=str+"<option value="+data.data[i].region_name+">"+data.data[i].region_name+"</option>"; } $(".addr_city").html(str); }, fail:function(){console.log("fail")}, error:function(){console.log("error")}, } ajaxPost(ajaxObject); }) /* 選擇城市，並展示縣*/ $(".addr_city").change(function(){ var addr_city=$(this).val(); if(addr_city=="請選擇城市"){ alert("請選擇城市"); $(".addr_county").empty(); return false; } var addr_province=$(".addr_province").val(); //通過省份 城市雙選 確保縣范圍正確（避免同名市縣情況）
$(".addr_county").empty(); var ajaxObject={ url:"unionshop/rest/goSelectCounty", data:{ addr_province:addr_province, region_name:addr_city }, success:function (data) { var str="<option>請選擇縣</option>"; for(var i=0;i<data.data.length;i++){ str=str+"<option value="+data.data[i].region_name+">"+data.data[i].region_name+"</option>"; } $(".addr_county").html(str); console.log(data.data.length); console.log(data.data[0].region_name); }, fail:function(){console.log("fail")}, error:function(){console.log("error")}, } ajaxPost(ajaxObject); }) $(".addr_county").change(function(){ var addr_county=$(this).val(); if(addr_county=="請選擇縣"){ alert("請選擇縣"); return false; } }) </script>
java:controller層，后台接收數據
package com.fh.controller.youbao.information.unionshop;
/*import ……*/
@Controller
@RequestMapping(value="/unionshop")
public class UnionShopController extends BaseController {
String menuUrl = "unionshop/list.do"; //菜單地址(權限用)
@Resource(name="unionshopService")
private UnionShopService unionshopService;
/**
* rest新增
*/
/* @RequestMapping(value="/rest/save" , method=RequestMethod.POST ,
produces="application/json;charset=UTF-8")*/
@RequestMapping(value="/rest/save")
@ResponseBody
public ModelAndView restSave(@RequestParam Map<String, Object> params) throws Exception{
PageData pd = new PageData();
pd.putAll(params);
//保存數據
unionshopService.save(pd);
return list(this.getPage());
}
/**
* 通過省份確認城市
*/
@RequestMapping(value="/rest/goSelectCity" , method=RequestMethod.POST ,
produces="application/json;charset=UTF-8")
@ResponseBody
public String goSelectCity(@RequestBody Map<String,String> map) throws Exception{
PageData pd = new PageData();
pd.putAll(map);
pd.put("parent_id", 1);
//獲取省份id
PageData provinceInfor=unionshopService.confirmByRegionNameAndParentId(pd);
int province_id=Integer.parseInt(String.valueOf(provinceInfor.get("region_id")));
//獲取目標省份下的所有city
PageData thisProvince = new PageData();
thisProvince.put("parent_id", province_id);
List<PageData> addr_city = unionshopService.findByParentId(thisProvince);
return ResponseMessageEnum.SUCCESS.appendPageDataListToString(addr_city); //該步驟將目標省份下 的城市信息轉化為String格式傳給ajax的success函數的data形參
}
/**
* 通過省份，城市確認縣城
*/
@RequestMapping(value="/rest/goSelectCounty" , method=RequestMethod.POST ,
produces="application/json;charset=UTF-8")
@ResponseBody
public String goSelectCounty(@RequestBody Map<String,String> map) throws Exception{
//獲取省份id
PageData pd_province = new PageData();
pd_province.put("parent_id", "1");
pd_province.put("region_name", String.valueOf(map.get("addr_province")));
PageData provinceInfor=unionshopService.confirmByRegionNameAndParentId(pd_province);
int province_id=Integer.parseInt(String.valueOf(provinceInfor.get("region_id")));
//獲取城市id
PageData pd_city= new PageData();
pd_city.put("parent_id", province_id);
pd_city.put("region_name", String.valueOf(map.get("region_name")));
PageData cityInfor=unionshopService.confirmByRegionNameAndParentId(pd_city);
int city_id=Integer.parseInt(String.valueOf(cityInfor.get("region_id")));
//獲取目標城市下的所有縣
PageData thisCity = new PageData();
thisCity.put("parent_id", city_id);
List<PageData> addr_county = unionshopService.findByParentId(thisCity);
return ResponseMessageEnum.SUCCESS.appendPageDataListToString(addr_county); //將目標城市下的縣數據返回給ajax
}
/**
* 去新增頁面，跳轉到我們上面提到的jsp界面
*/
@RequestMapping(value="/goAdd")
public ModelAndView goAdd(){
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
PageData pdlist = new PageData();
pd = this.getPageData();
try {
//獲取全部省份數據
pdlist.put("parent_id", 1);
List<PageData> addr_province = unionshopService.findByParentId(pdlist);
mv.addObject("addr_province",addr_province);
mv.addObject("pdlist", pdlist);
mv.setViewName("information/unionshop/unionshop_edit");
mv.addObject("msg", "save");
mv.addObject("pd", pd);
} catch (Exception e) {
logger.error(e.toString(), e);
}
return mv;
}
/**
* 去編輯頁面，跳轉到我們前面提到的jsp界面
*/
@RequestMapping(value="/goEdit")
public ModelAndView goEdit(){
logBefore(logger, "去修改UnionShop頁面");
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
PageData pdlist = new PageData();
pd = this.getPageData();
try {
//獲取全部省份數據
pdlist.put("parent_id", 1);
List<PageData> addr_province = unionshopService.findByParentId(pdlist);
mv.addObject("addr_province",addr_province);
mv.addObject("pdlist", pdlist);
pd = unionshopService.findById(pd); //根據ID讀取該條數據，包括省市縣
mv.setViewName("information/unionshop/unionshop_edit");
mv.addObject("msg", "edit");
mv.addObject("pd", pd);
} catch (Exception e) {
logger.error(e.toString(), e);
}
return mv;
}
}
java:service層
package com.fh.service.information.unionshop;
@Service("unionshopService")
public class UnionShopService {
@Resource(name = "daoSupport")
private DaoSupport dao;
/*
* 新增
*/
public void save(PageData pd)throws Exception{
dao.save("UnionShopMapper.save", pd);
}
/*
* 修改
*/
public void edit(PageData pd)throws Exception{
dao.update("UnionShopMapper.edit", pd);
}
/*
*列表
*/
public List<PageData> list(Page page)throws Exception{
return (List<PageData>)dao.findForList("UnionShopMapper.datalistPage", page);
}
/*
*查找省份
*/
public List<PageData> findByParentId(PageData pd)throws Exception{
return (List<PageData>)dao.findForList("UnionShopMapper.findByParentId", pd);
}
/*
* 通過id獲取數據
*/
public PageData findById(PageData pd)throws Exception{
return (PageData)dao.findForObject("UnionShopMapper.findById", pd);
}
/*
* 通過省份選擇城市
*/
public PageData confirmByRegionNameAndParentId(PageData pd)throws Exception{
return (PageData)dao.findForObject("UnionShopMapper.confirmByRegionNameAndParentId", pd);
}
}
XML:mysql數據操作指令
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="UnionShopMapper">
<!-- 新增-->
<insert id="save" parameterType="pd">
insert into union_shop(
addr_province,
addr_city,
addr_county,
addr_detail
) values (
#{addr_province},
#{addr_city},
#{addr_county},
#{addr_detail}
)
</insert>
<!-- 修改 -->
<update id="edit" parameterType="pd">
update union_shop
set
addr_province = #{addr_province},
addr_city = #{addr_city},
addr_county = #{addr_county},
addr_detail = #{addr_detail}
id = id
where
id = #{id}
</update>
<!-- 通過id獲取數據 -->
<select id="findById" parameterType="pd" resultType="pd">
select * from
union_shop
where
id = #{id}
</select>
<!-- 通過省份選城市 -->
<select id="confirmByRegionNameAndParentId" parameterType="pd" resultType="pd">
select * from
region
where
region_name = #{region_name} and parent_id=#{parent_id}
</select>
</mapper>
mysql文件：中國省市縣全部數據信息，文件名--region.sql鏈接：http://files.cnblogs.com/files/wobuchifanqie/region-mysql.rar；部分內容如下：
mysql文件：項目接收選擇后的省市縣具體數據 ，文件名--union_shop.sql，如圖：
