本文將介紹如何使用Ajax來實現SSM框架下的二級聯動功能。二級聯動是指當一個下拉框的選項發生變化時，另一個下拉框的選項也隨之變化。例如，一個網頁上有一個省份的下拉框和一個城市的下拉框，當用戶選擇某個省份時，城市的下拉框只顯示該省份的城市選項。通過Ajax，可以實現在不刷新整個頁面的情況下，動態更新頁面的內容，提供用戶友好的交互體驗。

首先，我們需要在前端頁面中定義兩個select元素，一個用于顯示省份的下拉框，一個用于顯示城市的下拉框。選擇省份的下拉框的值發生變化時，我們通過ajax請求后端接口，獲取到該省份對應的城市列表，并將其動態添加到城市的下拉框中。

<select id="province" onchange="getCityList()">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
<select id="city"></select>

接下來，在JS代碼中我們定義了一個getCityList函數，用于處理選擇省份的下拉框值改變時的事件。該函數通過Ajax發送帶有省份id作為參數的請求，后端接口根據省份id返回對應的城市列表，并將其動態添加到城市的下拉框中。

function getCityList() {
var provinceId = document.getElementById("province").value;
var url = "/getCityList?provinceId=" + provinceId;
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function() {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
var cityList = JSON.parse(xmlHttpRequest.responseText);
var citySelect = document.getElementById("city");
citySelect.options.length = 0; // 清空下拉框所有選項
for(var i=0; i
在后臺中，我們需要編寫一個處理請求的Controller方法。該方法接收前端傳遞的省份id，并根據id查詢對應的城市列表。我們使用SSM框架，可以通過注解的方式將該方法映射到對應的請求路徑上。
@Controller
public class CityController {
@RequestMapping("/getCityList")
@ResponseBody
public ListgetCityList(Integer provinceId) {
// 根據省份id查詢城市列表
ListcityList = cityService.getCityListByProvinceId(provinceId);
return cityList;
}
}
以上就是使用Ajax實現SSM框架下二級聯動功能的完整代碼示例。當選擇省份下拉框的選項發生變化時，頁面會發送Ajax請求到后端，后端根據請求參數動態獲取對應的城市列表，并將其返回給前端。前端通過解析返回的數據，將城市列表動態添加到城市下拉框中。用戶在頁面上選擇了省份后，城市下拉框中只會顯示對應省份的城市選項，實現了二級聯動的效果。
通過以上代碼示例，我們可以看到使用Ajax實現SSM框架下的二級聯動功能并不復雜。通過前后端的配合，可以實現動態更新頁面內容的目的，提升用戶體驗。