Spring MVC中Ajax实现二级联动的简单实例

在 Spring MVC 中，我们可以使用 Ajax 实现二级联动。本文将详细讲解 Spring MVC 中 Ajax 实现二级联动的完整攻略，并提供两个示例说明。

1. 创建 Spring MVC 控制器

我们需要创建一个 Spring MVC 控制器，用于处理 Ajax 请求。下面是一个简单的示例：

@Controller
public class CityController {
  @GetMapping("/cities")
  @ResponseBody
  public List<City> getCitiesByProvince(@RequestParam("province") String province) {
    // 根据省份查询城市列表
    List<City> cities = new ArrayList<>();
    if ("广东省".equals(province)) {
      cities.add(new City("广州市"));
      cities.add(new City("深圳市"));
      cities.add(new City("珠海市"));
    } else if ("湖南省".equals(province)) {
      cities.add(new City("长沙市"));
      cities.add(new City("株洲市"));
      cities.add(new City("湘潭市"));
    }
    return cities;
  }
}

在上面的代码中，我们创建了一个 CityController 类，其中包含了一个 getCitiesByProvince 方法。该方法用于处理 Ajax 请求，并根据省份查询城市列表。

2. 创建 Ajax 请求

我们需要创建一个 Ajax 请求，用于向 Spring MVC 控制器发送请求。下面是一个简单的示例：

$(function() {
  $("#province").change(function() {
    $.ajax({
      url: "/cities",
      type: "GET",
      data: {
        "province": $("#province").val()
      },
      success: function(data) {
        $("#city").empty();
        for (var i = 0; i < data.length; i++) {
          var city = data[i];
          $("#city").append("<option value='" + city.name + "'>" + city.name + "</option>");
        }
      }
    });
  });
});

在上面的代码中，我们使用 jQuery 的 ajax 方法来发送一个 GET 请求。我们设置了请求的 URL、请求类型、请求参数和回调函数。

3. 处理 Ajax 请求

我们需要在 Spring MVC 控制器中处理 Ajax 请求，并返回一个城市列表。下面是一个简单的示例：

@GetMapping("/cities")
@ResponseBody
public List<City> getCitiesByProvince(@RequestParam("province") String province) {
  // 根据省份查询城市列表
  List<City> cities = new ArrayList<>();
  if ("广东省".equals(province)) {
    cities.add(new City("广州市"));
    cities.add(new City("深圳市"));
    cities.add(new City("珠海市"));
  } else if ("湖南省".equals(province)) {
    cities.add(new City("长沙市"));
    cities.add(new City("株洲市"));
    cities.add(new City("湘潭市"));
  }
  return cities;
}

在上面的代码中，我们使用 @GetMapping 注解来处理 GET 请求，并使用 @ResponseBody 注解来返回一个城市列表。

4. 示例说明

下面是两个示例，演示了如何使用 Spring MVC 和 Ajax 实现二级联动。

4.1 示例一：使用 Spring MVC 和 Ajax 实现省市联动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>省市联动</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $("#province").change(function() {
        $.ajax({
          url: "/cities",
          type: "GET",
          data: {
            "province": $("#province").val()
          },
          success: function(data) {
            $("#city").empty();
            for (var i = 0; i < data.length; i++) {
              var city = data[i];
              $("#city").append("<option value='" + city.name + "'>" + city.name + "</option>");
            }
          }
        });
      });
    });
  </script>
</head>
<body>
  <label for="province">省份：</label>
  <select id="province" name="province">
    <option value="广东省">广东省</option>
    <option value="湖南省">湖南省</option>
  </select>
  <label for="city">城市：</label>
  <select id="city" name="city"></select>
</body>
</html>

在上面的代码中，我们创建了一个省市联动页面，其中包含了两个下拉框。当用户选择省份时，我们使用 Ajax 发送一个 GET 请求，并将省份作为请求参数发送到 Spring MVC 控制器中。Spring MVC 控制器根据省份查询城市列表，并返回一个城市列表。我们使用 jQuery 将城市列表添加到城市下拉框中。

@Controller
public class CityController {
  @GetMapping("/cities")
  @ResponseBody
  public List<City> getCitiesByProvince(@RequestParam("province") String province) {
    // 根据省份查询城市列表
    List<City> cities = new ArrayList<>();
    if ("广东省".equals(province)) {
      cities.add(new City("广州市"));
      cities.add(new City("深圳市"));
      cities.add(new City("珠海市"));
    } else if ("湖南省".equals(province)) {
      cities.add(new City("长沙市"));
      cities.add(new City("株洲市"));
      cities.add(new City("湘潭市"));
    }
    return cities;
  }
}

在上面的代码中，我们创建了一个 CityController 类，其中包含了一个 getCitiesByProvince 方法。该方法用于处理 Ajax 请求，并根据省份查询城市列表。

4.2 示例二：使用 Spring MVC 和 Ajax 实现城市区县联动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>城市区县联动</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $("#city").change(function() {
        $.ajax({
          url: "/districts",
          type: "GET",
          data: {
            "city": $("#city").val()
          },
          success: function(data) {
            $("#district").empty();
            for (var i = 0; i < data.length; i++) {
              var district = data[i];
              $("#district").append("<option value='" + district.name + "'>" + district.name + "</option>");
            }
          }
        });
      });
    });
  </script>
</head>
<body>
  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="广州市">广州市</option>
    <option value="深圳市">深圳市</option>
    <option value="珠海市">珠海市</option>
  </select>
  <label for="district">区县：</label>
  <select id="district" name="district"></select>
</body>
</html>

在上面的代码中，我们创建了一个城市区县联动页面，其中包含了两个下拉框。当用户选择城市时，我们使用 Ajax 发送一个 GET 请求，并将城市作为请求参数发送到 Spring MVC 控制器中。Spring MVC 控制器根据城市查询区县列表，并返回一个区县列表。我们使用 jQuery 将区县列表添加到区县下拉框中。

@Controller
public class DistrictController {
  @GetMapping("/districts")
  @ResponseBody
  public List<District> getDistrictsByCity(@RequestParam("city") String city) {
    // 根据城市查询区县列表
    List<District> districts = new ArrayList<>();
    if ("广州市".equals(city)) {
      districts.add(new District("天河区"));
      districts.add(new District("越秀区"));
      districts.add(new District("海珠区"));
    } else if ("深圳市".equals(city)) {
      districts.add(new District("福田区"));
      districts.add(new District("罗湖区"));
      districts.add(new District("南山区"));
    } else if ("珠海市".equals(city)) {
      districts.add(new District("香洲区"));
      districts.add(new District("斗门区"));
      districts.add(new District("金湾区"));
    }
    return districts;
  }
}

在上面的代码中，我们创建了一个 DistrictController 类，其中包含了一个 getDistrictsByCity 方法。该方法用于处理 Ajax 请求，并根据城市查询区县列表。

总结

本文详细讲解了 Spring MVC 中 Ajax 实现二级联动的完整攻略，并提供了两个示例说明。我们可以使用 Ajax 发送请求，Spring MVC 控制器处理请求，并返回一个城市或区县列表。通过本文的学习，相信读者已经掌握了 Spring MVC 中 Ajax 实现二级联动的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring MVC中Ajax实现二级联动的简单实例 - Python技术站

Spring MVC中Ajax实现二级联动的简单实例