ssm使用ajax级联(示例代码)

SSM（Spring+SpringMVC+MyBatis）是一种常用的Java Web开发框架，它的优势在于能够快速开发高效稳定的网页应用。在SSM框架中，使用Ajax技术实现级联操作是常见的需求。Ajax是一种在不重新加载整个网页的情况下，通过后台服务器与前端进行数据交互的技术。在级联操作中，通常是通过选择一个下拉列表的选项，来动态加载另一个下拉列表的选项。下面是一个使用Ajax实现级联操作的示例代码：

在前端页面中定义两个下拉列表，第一个下拉列表用于选择省份，第二个下拉列表用于显示对应的城市选项。在第一个下拉列表的选项发生改变时，通过Ajax请求后台数据，并将返回的城市数据动态添加到第二个下拉列表中。

HTML代码如下：

<select id="province" onchange="loadCities()">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
</select>
<select id="city">
  <option value="0">请选择城市</option>
</select>

然后，在JavaScript中定义一个函数`loadCities()`，该函数用于发送Ajax请求并处理返回的城市数据。在该函数中，首先获取第一个下拉列表的选中值，然后通过Ajax发送请求到后台的一个接口，将选中值作为参数传递给后台。后台根据接收到的参数，查询对应的城市数据，并将数据以JSON格式返回给前端。

JavaScript代码如下：

function loadCities() {
  var provinceId = document.getElementById("province").value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var cities = JSON.parse(xhr.responseText);
      var citySelect = document.getElementById("city");
      citySelect.innerHTML = ""; // 清空原有选项
      for (var i = 0; i < cities.length; i++) {
        var option = document.createElement("option");
        option.value = cities[i].id;
        option.innerHTML = cities[i].name;
        citySelect.appendChild(option);
      }
    }
  };
  xhr.open("GET", "/getCities?provinceId=" + provinceId, true);
  xhr.send();
}

在后台的Controller中定义一个接口`getCities`，该接口接收前端传递的省份ID参数，根据省份ID查询对应的城市数据，并将数据以JSON格式返回给前端。

Java代码如下：

@RestController
public class CityController {
  @Autowired
  private CityService cityService;
  @RequestMapping("/getCities")
  public List<City> getCities(@RequestParam("provinceId") int provinceId) {
    return cityService.getCitiesByProvinceId(provinceId);
  }
}

以上就是使用Ajax实现SSM框架中的级联操作的示例代码。通过前端页面中的下拉列表选择省份，后台根据选择的省份查询对应的城市数据，并将数据动态添加到另一个下拉列表中，实现了级联效果。