springmvc+spring+mybatis+jquery+js动态读取省市区数据_spring 省市区乡后台-优快云博客

本文链接：https://blog.youkuaiyun.com/u014079773/article/details/77868257

本文介绍了一个基于前后端交互的省市区及小区联动选择器的设计与实现过程，包括前端页面布局、JavaScript交互逻辑以及后端数据接口设计。

业务要求：

添加数据：省市区数据从后台读取，前台根据选择的省，联动展示市，区

修改数据：省市区数据从后台读取，默认展示选中的数据，然后可以重新省，联动查询市，区

页面效果：

初始化：

选择省，联动查询市，区，小区

添加页面：

<!-- Modal:添加店铺 -->
<div class="modal fade" id="addStore"  role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width:800px;">
    <div class="modal-content">
	  <div class="modal-header">
	  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	  <h4 class="modal-title">添加店铺</h4>
	   </div>
	    <form role="form" class="form-horizontal" id="addStoreForm" method="post" action="addMyStore.htm" enctype="multipart/form-data"  >
	            <div class="modal-body">
	                <div class="modal_form">
	                    <div class="form-group">
	                  	<label class="control-label col-sm-4"><span class="text-danger">*</span>所在小区：</label>
		                 <div class="col-sm-1"></div>
		                 <div class="col-sm-4">
		                  <select class="form-control required province" name="storeProvince" onchange="changeProvince('addStore',this.options[this.options.selectedIndex].value)"></select>
		                 </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control city" name="storeCity" onchange="changeCity('addStore',this.options[this.options.selectedIndex].value)"></select>
		                    </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control district" name="storeCounty"  onchange="changeDistrict('addStore',this.options[this.options.selectedIndex].value)"></select>
		                    </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control required village"  name="storeVillage" onchange="changeVillage('addStore')"></select>
		                    </div>
		           
	                </div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-primary" onclick="saveMyStore();">保存</button>
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	            </div>
	      </form>
	</div>
  </div>
</div>

编辑页面：

<!-- Model:编辑店铺 -->
	<div class="modal fade" id="editStore"  role="dialog" aria-hidden="true">
	    <div class="modal-dialog" style="width:800px;">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">编辑店铺</h4>
	            </div>
	            <form role="form" class="form-horizontal" id="editStoreForm" method="post" action="editMyStore.htm" enctype="multipart/form-data" >
	            <div class="modal-body">
	                <div class="modal_form"> 
	                    <div class="form-group">
	                  		<label class="control-label col-sm-4"><span class="text-danger">*</span>所在小区：</label>
		                  	<div class="col-sm-1"></div>
		                  	<div class="col-sm-4">
		                    	<select class="form-control required province" name="storeProvince" onchange="changeProvince('editStore',this.options[this.options.selectedIndex].value)" ></select>
		                    </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control city" name="storeCity" onchange="changeCity('editStore',this.options[this.options.selectedIndex].value)" ></select>
		                    </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control district" name="storeCounty" onchange="changeDistrict('editStore',this.options[this.options.selectedIndex].value)"></select>
		                    </div>
		                    <div class="col-sm-1"></div>
		                    <div class="col-sm-4">
		                    	<select class="form-control required village"  name="storeVillage" onchange="changeVillage('editStore')"></select>
		                    </div>
		                </div>

	                </div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-primary" onclick="editMyStore();">保存</button>
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	            </div>
	            </form>
	        </div>
	    </div>
	</div>

js写法：

/**
 * 初始化
 */
$(function(){
	
	//添加店铺加载省份
	loadProvice('addStore');
	//编辑店铺加载省份
	loadProvice('editStore');
	
});

/**
 * 加载省份
 * @param modalId  模态框id
 */
function loadProvice(modalId){
	$.ajax({
        type: 'post',
        url:'getAllProvince.htm',
        async:false,
        cache:false,
        success: function(data) {
            var options = "";
            options +=  "<option value=''>"+"请选择"+"</option>";
            if(data!=null){
            	for( var i=0; i<data.length; i++){
            		var province=data[i];
            		options +=  "<option value='"+province.provinceId+"'>"+province.provinceName+"</option>";
            	}
            	$("#"+modalId).find(".province").html(options);
            }
        }
    });
	//根据省份编号加载该省份下所有城市
    loadCity(modalId,$("#"+modalId).find(".province").val());
};

/**
 * 根据省份编号加载该省份下所有城市
 * @param modalId 模态框id
 * @param pId 省份编号
 */
function loadCity(modalId,pId){
    $.ajax({
        type: 'post',
        url:'getAllCityByPid.htm',
        async:false,
        cache:false,
        data:{"provinceId":pId},
        dataType:"json",
        success: function(data) {
        	var options = "";
            if(data.length!=0){
                for( var i=0; i<data.length; i++){
                    var city=data[i];
                    options +=  "<option value='"+city.cityId+"'>"+city.cityName+"</option>";
                }
                $("#"+modalId).find(".city").html(options);
            }else{
            	$("#"+modalId).find(".city").html("<option value='' >"+"请选择"+"</option>");
                $("#"+modalId).find(".district").html("<option value='' >"+"请选择"+"</option>");
                $("#"+modalId).find(".village").html("<option value='' >"+"请选择"+"</option>"); 
            }
        }
    });
    //根据城市编号加载该城市下所有区县
    loadDistrict(modalId,$("#"+modalId).find(".city").val());
}
/**
 * 根据城市编号加载该城市下所有区县
 * @param modalId 模态框id
 * @param cId 市（城市）
 */
function loadDistrict(modalId,cId){
    $.ajax({
        type: 'post',
        url:'getAllDistrictByCid.htm',
        async:false,
        cache:false,
        data:{"cityId":cId},
        dataType:"json",
        success: function(data) {
        	var options = "";
            if(data.length != 0){
                for( var i=0; i<data.length; i++){
                    var district=data[i];
                    options +=  "<option value='"+district.districtId+"'>"+district.districtName+"</option>";
                }
                $("#"+modalId).find('.district').html(options);
            }else{
            	$("#"+modalId).find('.district').html("<option value='' >"+"请选择"+"</option>");
            	$("#"+modalId).find(".village").html("<option value='' >"+"请选择"+"</option>");
            }
        }
    });
    // 根据区县编号加载该区县下所有城市小区
    loadVillage(modalId,$("#"+modalId).find(".district").val());
}

/**
 * 根据区县编号加载该区县下所有城市小区
 * @param modalId  模态框id
 * @param DId 区县id
 */
function loadVillage(modalId,dId){
	$.ajax({
        type: 'post',
        url:'getAllCountryByDid.htm',
        async:false,
        cache:false,
        data:{"districtId":dId},
        dataType:"json",
        success: function(data) {
        	var options = "";
            if(data.length != 0){
                for( var i=0; i<data.length; i++){
                    var village=data[i];
                    options +=  "<option value='"+village.villageId+"'>"+village.villageName+"</option>";
                }
                $("#"+modalId).find('.village').html(options);
            }else{
            	$("#"+modalId).find('.village').html("<option value='' >"+"请选择"+"</option>");
            }
        }
    });
}

/**
 * 省份改变时触发事件
 * @param modalId 模态框id
 */
function changeProvince(modalId,pId){
	loadCity(modalId,pId);
}

/**
 * 城市改变时触发事件
 * @param modalId 模态框id
 */
function changeCity(modalId,cId){
	loadDistrict(modalId,cId);
}

/**
 * 区县改变时触发事件
 */
function changeDistrict(modalId,dId){
	loadVillage(modalId,dId);
}

/**
 * 小区改变时触发事件
 * @param modalId 模态框id
 */
function changeVillage(modalId){
	//当改变小区时重新输入经纬度，因为每个小区的经纬度不一样
	$("#"+modalId).find("input[name=tude]").val('');
}

/**
 * 编辑店铺选中的省市区
 * @param pId 省份编号
 * @param cId 城市编号
 * @param dId 区县编号
 * @param vId 小区编号
 * @param modalId 模态框id
 */
function selectOption(pId,cId,dId,vId,modalId){
	//测试用
//	alert("pId:"+pId);alert("cId:"+cId);
//	alert("dId:"+dId);alert("vId:"+vId);
//	alert("modalId:"+modalId);
	
	//选中省份
	$("#"+modalId).find(".province option[value='"+pId+"']").prop("selected","selected"); 
	//加载城市
	loadCity(modalId,pId);
	//选中城市
	$("#"+modalId).find(".city option[value='"+cId+"']").prop("selected","selected"); 
	//加载区县
	loadDistrict(modalId,cId);
	//选中区县
	$("#"+modalId).find(".district option[value='"+dId+"']").prop("selected","selected");
	//加载小区
	loadVillage(modalId,dId);
	//选中小区
	$("#"+modalId).find(".village option[value='"+vId+"']").prop("selected","selected");
	
}

点击编辑弹框显示数据，展示默认选中的省市区，小区

/**
 * 编辑店铺弹出框并初始化
 * @param storeId 店铺id
 */
function editStore(storeId){
	//清空form表单
	$("#editStoreForm")[0].reset();
	//根据店铺id查询店铺信息
	$.ajax({
		type:"post",  
		url: "findStoreInfoById.htm",
		data:{"storeId":storeId},
		dataType:"json",
		success: function(data){
			//编辑模态框id
			var modalId="editStore";
			//省份编号
			var pId=data.storeProvince;
			//城市编号
			var cId=data.storeCity;
			//区县编号
			var dId=data.storeCounty;
			//店铺所在省市区,小区
			selectOption(pId,cId,dId,vId,modalId);
			
			//弹出编辑店铺模态框
			$("#editStore").modal("show");
		}
   });
}

后台查询数据：

/**
     * 查询所有省份
     * @return List<ProvinceBean> 省份集合
     * @see {@link com.qianjiang.other.bean.ProvinceBean}
     */
    @RequestMapping("/getAllProvince")
    @ResponseBody
    public List<ProvinceBean> getAllProvince() {
        return customerServiceMapper.selectAllProvince();
    }

    /**
     * 根据省份编号查询该省份下所有城市
     * @return List<CityBean> 城市集合
     * @see {@link com.qianjiang.other.bean.CityBean}
     */
    @RequestMapping("/getAllCityByPid")
    @ResponseBody
    public List<CityBean> getAllCityByPid(Long provinceId) {
        return customerServiceMapper.selectAllCityByPid(provinceId);
    }
    
    /**
     * 根据城市编号查询该城市下所有区县
     * @return List<CityBean> 区县集合
     * @see {@link com.qianjiang.other.bean.DistrictBean}
     */
    @RequestMapping("/getAllDistrictByCid")
    @ResponseBody
    public List<DistrictBean> getAllDistrictByCid(Long cityId) {
        return customerServiceMapper.selectAllDistrictByCid(cityId);
    }
    
    /**
     * 根据区县编号查询所有城市小区
     * @param districtId 区县编号
     * @return
     */
    @RequestMapping("/getAllCountryByDid")
    @ResponseBody
    public List<VillageBean> getAllCountryByDid(Long districtId){
    	return customerServiceMapper.getAllCountryByDid(districtId);
    }

xml文件：

<!-- 查询所有省份-->
    <select id="selectAllProvince" resultMap="proviceMap">
		select
		p.province_id,p.province_name
		from t_sys_province p
		where p.del_flag = '0'
	</select>

 <!-- 查询所有城市根据省份编号-->
    <select id="selectAllCityByPid" resultMap="cityMap" parameterType="java.lang.Long">
		select 
    	c.city_id,c.city_name
   		from t_sys_city c
    	where c.province_id = #{provinceId,jdbcType=BIGINT}
    	and c.del_flag = '0' 
	</select>

<!-- 查询所有区县根据城市编号-->
    <select id="selectAllDistrictByCid" resultMap="districtMap" parameterType="java.lang.Long">
		select
		d.district_id,d.district_name
		from t_sys_district d
		where d.city_id = #{cityId,jdbcType=BIGINT}
    	and d.del_flag = '0' 
	</select>

<!-- 根据区县编号查询所有城市小区 -->
	<select id="getAllCountryByDid" parameterType="java.lang.Long" resultMap="villageMap">
		select v.id as "village_id",v.name as "village_name" ,v.county as "district_id"
		from t_village v
		where v.county=#{districtId}
	</select>

备注：

省，市，区，小区，数据库设计这里均是分开设计，每个表省，市，区，小区等表都是一一关联。