Ajax,js实现省市二级联动

33 篇文章 2 订阅

Ajax,js实现省市二级联动

这里不罗嗦,直接放图,分析。
如图实现效果。如下:
在这里插入图片描述
前端代码分析:
在这里插入图片描述
后端代码,相当简单,只需要查询数据库,省份放一个list集合,城市放一个list集合,回写响应给前端。
前端通过循环,一一获取。
response.setContentType(“text/html;charset=utf-8”);
ProvinceService provinceService = new ProvinceServiceImpl();
List> province = provinceService.findProvince();
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),province);
总结就到这里,如果有疑问可以留言,或者私信我。

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
ajax 省市二级联动是一种常见的前端技术,它可以实现在选择省份后,自动加载该省份下的城市列表,从而实现省市二级联动的效果。下面是一个简单的实现步骤: 1. 在 HTML 页面中,定义两个下拉框,一个用于选择省份,一个用于选择城市。 2. 在 JavaScript 中,使用 Ajax 技术向服务器请求省份列表,并将其填充到省份下拉框中。 3. 当用户选择省份时,使用 Ajax 技术向服务器请求该省份下的城市列表,并将其填充到城市下拉框中。 下面是一个简单的代码示例: HTML 代码: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JavaScript 代码: ``` // 请求省份列表 $.ajax({ url: '/api/provinces', success: function(data) { // 将省份列表填充到省份下拉框中 var $province = $('#province'); $.each(data, function(index, province) { $province.append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 当用户选择省份时,请求该省份下的城市列表 $('#province').on('change', function() { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '/api/cities?provinceId=' + provinceId, success: function(data) { // 将城市列表填充到城市下拉框中 var $city = $('#city'); $city.empty().append('<option value="">请选择城市</option>'); $.each(data, function(index, city) { $city.append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { // 如果用户选择了“请选择省份”,则清空城市下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); } }); ```
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值