java ajax 实现省市区级联操作

最新推荐文章于 2021-08-26 17:37:06 发布

csdnguo

最新推荐文章于 2021-08-26 17:37:06 发布

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏： web 开发

本文链接：https://blog.youkuaiyun.com/csdnguo/article/details/39397627

web 开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个基于Java Spring MVC框架实现的地区级联数据获取功能，包括省、市、区的联动选择，并通过JavaScript实现了前后端交互，提供了一个完整的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-------controller--开始-------------

/**

* 地区获取级联数据

* @param request

* @param response

* @param selLv

* 1：获取省， 2：获取城市

* @param cdVal

* 选择的省市的 id

* @return out json

public String areaCheck(HttpServletRequest request,

HttpServletResponse response,

@RequestParam(value = "selLv", required = false) String selLv,

@RequestParam(value = "cdVal", required = false) String cdVal) {

try {

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

if (StringUtils.isNotBlank(selLv) && StringUtils.isNotBlank(cdVal)) {

Gson gson = new Gson();

String obj = "";

if ("1".equals(selLv)) { // 1代表省

List<DicMdmProvince> list = dicMdmProvinceService

.findByAreaCd(Long.parseLong(cdVal), null, null);

obj = gson.toJson(list);

} else if ("2".equals(selLv)) { //2代表城市

List<DicMdmCity> list = dicMdmCityService.findByProvinceCd(

Long.parseLong(cdVal), null, null);

obj = gson.toJson(list);

}

out.print(obj);

out.flush();

out.close();

}

} catch (IOException e) {

e.printStackTrace();

}

return "";

-------controller--结束-------------

-------js 开始--------------

$(function(){
//首先根据省选择市

$("#selArea").change(function(){

var valStr = $('#selArea').val();

$.ajax({

type: "get",

url: win$.url("areaCheck"),

data: {'selLv': 1, 'cdVal': valStr},

success: function(data){

var msg = eval('(' + data + ')');

$('#selProvince').empty().append('<option value="">请选择</option>');

$.each(msg, function(i, val) {

$('#selProvince').append('<option value="' + val.provinceCd + '">' + val.provinceName + '</option>');

});

}

});

});

//再根据市选择区

$("#selProvince").change(function(){

var valStr = $('#selProvince').val();

$.ajax({

type: "get",

url: win$.url("areaCheck"),

data: {'selLv': 2, 'cdVal': valStr},

success: function(data){

var msg = eval('(' + data + ')');

$('#selCity').empty().append('<option value="">请选择</option>');

$.each(msg, function(i, val) {

$('#selCity').append('<option value="' + val.cityCd + '">' + val.cityName + '</option>');

});

}

});

</script>

-------js 结束--------------

-------页面显示参考--开始------------------
<tr>
<td colspan="8">
<span class="label"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp地区：</span>

<select name="searchAreaName" id="selArea" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
<c:forEach var="area" items="${dicMdmArea }" >
<c:choose>
<c:when test="${area.areaCd eq param.searchAreaName}">
<option value="${area.areaCd}" selected="selected">${area.areaName}</option>
</c:when>
<c:otherwise>
<option value="${area.areaCd}">${area.areaName}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>&nbsp

<input type="hidden" id="Provinceid" value="${param.searchProvinceName}"/>
<select name="searchProvinceName" id="selProvince" class="select" style="width:105px">
<option value="" selected="selected" >请选择</option>
</select>&nbsp


<input type="hidden" id="Cityid" value="${param.searchCityName}"/>
<select name="searchCityName" id="selCity" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
-------页面显示--开始------------------