实现简单的省市联动(通过HTML和JS)

文章正文
发布时间:2024-06-06 08:32

Spring MVC是一种基于Java的Web开发框架,它提供了一种简单而灵活的方式来构建Web应用程序。实现省市联动是指在前端页面上选择省份后,根据选择的省份动态加载对应的城市信息。 下面是一种实现省市联动的方法: 1. 在前端页面上,使用HTML的<select>标签创建一个下拉框,用于选择省份。例如: ```html <select id="province" onchange="loadCities()"> <option value="1">北京</option> <option value="2">上海</option> ... </select> ``` 2. 在JavaScript中,编写一个函数`loadCities()`,该函数会在选择省份后被调用。该函数通过Ajax请求向后端发送选择的省份信息,并接收后端返回的城市信息。例如: ```javascript function loadCities() { var provinceId = document.getElementById("province").value; var xhr = new XMLHttpRequest(); xhr.open("GET", "/getCities?provinceId=" + provinceId, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var cities = JSON.parse(xhr.responseText); // 根据返回的城市信息更新城市下拉框 updateCities(cities); } }; xhr.send(); } ``` 3. 在后端,创建一个Controller处理`/getCities`的请求,并根据传入的省份ID查询对应的城市信息。例如: ```java @Controller public class CityController { @Autowired private CityService cityService; @GetMapping("/getCities") @ResponseBody public List<City> getCities(@RequestParam("provinceId") int provinceId) { return cityService.getCitiesByProvinceId(provinceId); } } ``` 4. 在CityService中,根据省份ID查询对应的城市信息。例如: ```java @Service public class CityService { @Autowired private CityRepository cityRepository; public List<City> getCitiesByProvinceId(int provinceId) { return cityRepository.findByProvinceId(provinceId); } } ``` 5. 在CityRepository中,定义查询方法,根据省份ID查询对应的城市信息。例如: ```java public interface CityRepository extends JpaRepository<City, Integer> { List<City> findByProvinceId(int provinceId); } ``` 这样,当选择省份时,前端页面会发送Ajax请求到后端,后端根据省份ID查询对应的城市信息,并将城市信息返回给前端,前端再根据返回的城市信息更新城市下拉框。