javaWeb數據庫動態加載全國省市區三級聯動

demo源碼下載地址：https://git.oschina.net/zhengweishan/GetProvinceCityArea

首先聲明一下，全國省市區三級聯動有不少的插件。沒有必要這麼麻煩的把省市區存到數據庫，而後再獲取。這樣缺點很明顯：

缺點：使用數據庫，每次動態ajax獲取數據都要操做一次數據庫，增長了數據庫的負擔。不推薦這樣作，直接使用插件比較好。

一些Jquery插件比較省時省力，不用來回操做數據庫，就能達到你想要的效果，頁面修飾就要本身設計咯。並且使用數據庫你還要事先把省市區數據存到數據庫，耗費精力，及時有一些現成的sql文件能夠導入。可是感受好麻煩有沒有，博主算是試了一次。

好了說了不少廢話，開始上代碼吧：

頁面展現主要代碼：

                  

  <div class="form-group has-success col-md-4">
                        <label for="provinceId">選擇省份:</label>
                        <select data-placeholder="省份" id="provinceId" name="province" class="form-control"
                                data-rel="chosen">
                            <c:if test="${!empty provinceList}">
                                <c:forEach items="${provinceList}" var="province">
                                    <option value="${province.provinceid}">${province.province}</option>
                                </c:forEach>
                            </c:if>
                        </select>
                    </div>
                    <div class="form-group has-success col-md-4">
                        <label for="cityId">選擇城市:</label>
                        <select data-placeholder="城市" name="city" id="cityId" class="form-control" data-rel="chosen">
                            <option>選擇城市</option>
                        </select>
                    </div>
                    <div class="form-group has-success col-md-4" >
                        <label for="areaId">選擇區域:</label>
                        <select data-placeholder="區域" name="area" id="areaId" class="form-control" data-rel="chosen">
                            <option>選擇區域</option>
                        </select>
                    </div>

頁面效果圖：

頁面js代碼：

<script type="text/javascript">
    /*頁面加載就開始執行js*/
    $(document).ready(function () {
        $("#provinceId").change(function () {
            $.get("getCityByProvinceId/"+$("#provinceId").val(),function(data){
                if(data.status){
                    var result = "<option>選擇城市</option>";
                    $.each(data.obj,function(n,value){
                        result +="<option value='"+value.cityid+"'>"+value.city+"</option>";
                    });
                    $("#cityId").html('');
                    $("#cityId").append(result);
                }
            },"json");
        });
        $("#cityId").change(function () {
            $.get("getAreaByCityId/"+$("#cityId").val(),function(data){
                if(data.status){
                    var result = "<option>選擇區域</option>";
                    $.each(data.obj,function(n,value){
                        result +="<option value='"+value.areaid+"'>"+value.area+"</option>";
                    });
                    $("#areaId").html('');
                    $("#areaId").append(result);
                }
            },"json");
        });
    });
</script>

後臺接收數據的代碼：

    

//獲取全部的省份信息並傳到前臺
    @RequestMapping(value = "/schoolAddInput")
    public String addInput(ModelMap map) {
        map.addAttribute("provinceList", cityService.getAllProvince());
        return "school/addInput";
    }
    //    根據省份id獲取城市數據後直接使用@ResponseBody裝成json數據
    @RequestMapping(value = "/getCityByProvinceId/{id}")
    @ResponseBody
    public Json getCityByProvinceId(@PathVariable("id") String id){
        List<City> cityList = cityService.getCityByProvinceId(id);
        if (cityList!=null){
            return new Json(true,"success",cityList);
        } else {
            return new Json(false,"fail",null);
        }
    }
    //    根據城市id獲取區域數據後直接使用@ResponseBody裝成json數據
    @RequestMapping(value = "/getAreaByCityId/{id}")
    @ResponseBody
    public Json getAreaByCityId(@PathVariable("id") String id){
        List<Area> areaList = cityService.getAreaByCityId(id);
        if (areaList!=null){
            return new Json(true,"success",areaList);
        } else {
            return new Json(false,"fail",null);
        }
    }

服務層代碼：

@Service
public class CityService {
    @Inject
    private CityDao cityDao;
    @Inject
    private ProvinceDao provinceDao;
    @Inject
    private AreaDao areaDao;
    public List<Province> getAllProvince() {
        return provinceDao.list();
    }
    public List<City> getCityByProvinceId(String id) {
        return cityDao.getCityByProvinceId(id);
    }
    public List<Area> getAreaByCityId(String id) {
        return areaDao.getAreaByCityId(id);
    }
}

DAO層代碼不用說大家猜也能猜到吧(*^__^*) …… 簡單的查詢語句。數據庫持久層我使用的是mybatis框架分享其中的一個mapper文件 CityDao.xml

<?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="com.hyt.dao.CityDao" >
  <resultMap id="BaseResultMap" type="com.hyt.domain.City" >
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="cityID" property="cityid" jdbcType="VARCHAR" />
    <result column="city" property="city" jdbcType="VARCHAR" />
    <result column="father" property="father" jdbcType="VARCHAR" />
  </resultMap>
  <select id="getCityByProvinceId" resultMap="BaseResultMap" parameterType="java.lang.String">
    select * from hat_city where father = #{id,jdbcType=VARCHAR}
  </select>
</mapper>

是否是很簡單，的確很簡單。可是使用這種獲取省市區三級聯動，仍是很差。直接使用插件多好~你們說是吧，全國省市級三級聯動jquery代碼本身找度娘吧！ 順便也鍛鍊下本身的搜尋知識的能力~
全國城市sql文件（mysql版本）：（點擊就能夠獲取地址~）

demo源碼下載地址：https://git.oschina.net/zhengweishan/GetProvinceCityArea