省市城市ajax级联查询实现代码

省市城市级联查询可以通过AJAX实现，前端发送请求到后端获取数据，然后根据选择的省份动态更新城市和区县的数据。以下是一个简单的示例代码：，，“

javascript，// 假设我们有一个HTML结构如下：，/*，，，，*/，，// 使用jQuery进行AJAX请求，$(document).ready(function() {，    // 加载省份数据，    $.ajax({，        url: '/getProvinces', // 替换为实际的API地址，        method: 'GET',，        success: function(data) {，            var provinceSelect = $('#province');，            data.forEach(function(province) {，                provinceSelect.append('' + province.name + '');，            });，        }，    });，，    // 监听省份选择变化，    $('#province').change(function() {，        var provinceId = $(this).val();，        // 根据选择的省份ID加载城市数据，        $.ajax({，            url: '/getCities', // 替换为实际的API地址，            method: 'GET',，            data: { provinceId: provinceId },，            success: function(data) {，                var citySelect = $('#city');，                citySelect.empty();，                data.forEach(function(city) {，                    citySelect.append('' + city.name + '');，                });，            }，        });，    });，，    // 监听城市选择变化，    $('#city').change(function() {，        var cityId = $(this).val();，        // 根据选择的城市ID加载区县数据，        $.ajax({，            url: '/getDistricts', // 替换为实际的API地址，            method: 'GET',，            data: { cityId: cityId },，            success: function(data) {，                var districtSelect = $('#district');，                districtSelect.empty();，                data.forEach(function(district) {，                    districtSelect.append('' + district.name + '');，                });，            }，        });，    });，});，

“，，这个示例展示了如何使用jQuery进行AJAX请求来实现省市城市的级联查询。你需要根据实际情况替换API地址，并确保后端提供相应的接口来返回省份、城市和区县的数据。

一、整体思路

1、前端部分

页面结构搭建：创建两个下拉菜单，一个用于展示省份列表，另一个用于展示城市列表，当用户选择不同的省份时，城市下拉菜单中的内容会根据所选省份动态更新。

Ajax请求发送：在前端页面中，通过JavaScript的Ajax技术向服务器发送请求，获取省份列表和对应省份的城市列表。

数据填充与显示：将服务器返回的数据填充到相应的下拉菜单中，实现数据的动态展示。

2、后端部分

接口设计：编写处理Ajax请求的接口，根据请求参数的不同，返回相应的省份或城市数据。

数据处理：从数据库或其他数据源中获取省份和城市数据，并根据需要进行加工处理。

二、具体实现步骤

前端实现

1、HTML页面结构

创建两个<select>元素，分别用于选择省份和城市，并设置对应的id属性，以便后续通过JavaScript进行操作。

   <label for="province">选择省份：</label>
   <select id="province">
       <option value="">请选择省份</option>
   </select>
   <br>
   <label for="city">选择城市：</label>
   <select id="city">
       <option value="">请选择城市</option>
   </select>

2、JavaScript代码

使用原生JavaScript或jQuery库来实现Ajax请求和数据更新，以下以原生JavaScript为例：

当页面加载完成后，向服务器发送获取省份列表的Ajax请求，可以使用XMLHttpRequest对象或者fetch函数来发送请求，例如使用fetch函数：

     document.addEventListener("DOMContentLoaded", function() {
         fetch('获取省份列表的接口地址')
             .then(response => response.json())
             .then(data => {
                 const provinceSelect = document.getElementById('province');
                 data.forEach(province => {
                     const option = document.createElement('option');
                     option.value = province.id;
                     option.textContent = province.name;
                     provinceSelect.appendChild(option);
                 });
             })
             .catch(error => console.error('Error:', error));
     });

监听省份下拉菜单的change事件，当用户选择不同的省份时，向服务器发送获取该省份城市列表的Ajax请求，并更新城市下拉菜单的内容。

     document.getElementById('province').addEventListener('change', function() {
         const selectedProvinceId = this.value;
         if (selectedProvinceId) {
             fetch(获取城市列表的接口地址?provinceId=${selectedProvinceId})
                 .then(response => response.json())
                 .then(data => {
                     const citySelect = document.getElementById('city');
                     citySelect.innerHTML = '<option value="">请选择城市</option>'; // 清空城市下拉菜单
                     data.forEach(city => {
                         const option = document.createElement('option');
                         option.value = city.id;
                         option.textContent = city.name;
                         citySelect.appendChild(option);
                     });
                 })
                 .catch(error => console.error('Error:', error));
         }
     });

后端实现（以Java为例）

1、控制器层

创建一个控制器类，用于处理前端发送的请求。

     @RestController
     @RequestMapping("/api")
     public class CityAndProvinceController {

在控制器类中，编写两个方法，一个用于获取省份列表，另一个用于根据省份ID获取城市列表。

     @GetMapping("/provinces")
     public List<Province> getProvinces() {
         // 从数据库或其他数据源中获取省份列表
         return provinceService.getAllProvinces();
     }
     
     @GetMapping("/cities")
     public List<City> getCitiesByProvinceId(@RequestParam("provinceId") int provinceId) {
         // 根据省份ID从数据库或其他数据源中获取城市列表
         return cityService.getCitiesByProvinceId(provinceId);
     }

2、服务层

创建服务类，用于与数据库进行交互，获取省份和城市数据。

     @Service
     public class ProvinceService {
         public List<Province> getAllProvinces() {
             // 从数据库中查询所有省份信息
             return provinceMapper.getAllProvinces();
         }
     }
     
     @Service
     public class CityService {
         public List<City> getCitiesByProvinceId(int provinceId) {
             // 根据省份ID从数据库中查询对应的城市信息
             return cityMapper.getCitiesByProvinceId(provinceId);
         }
     }

3、数据访问层（Mapper）

创建Mapper接口，定义与数据库交互的方法。

     public interface ProvinceMapper {
         List<Province> getAllProvinces();
     }
     
     public interface CityMapper {
         List<City> getCitiesByProvinceId(int provinceId);
     }

配置Mapper接口与数据库的映射关系，通常在配置文件中进行配置。