本文將介紹如何使用Ajax提交JSON數據到控制器。使用Ajax提交JSON數據可以方便地將前端數據傳遞給后端控制器進行處理，從而實現動態的數據交互。

假設我們有一個頁面，其中包含一個輸入框和一個提交按鈕。當用戶在輸入框中輸入內容并點擊提交按鈕時，我們希望將這個輸入的內容通過Ajax請求發送給后端控制器，并進行相關的處理。

首先，我們需要在頁面中引入jQuery庫，因為jQuery提供了便捷的Ajax函數來處理請求和響應。你可以在Head標簽中添加以下代碼：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下來，我們需要編寫一段JavaScript代碼來處理提交按鈕的點擊事件，并使用Ajax發送請求。你可以在頁面中添加以下代碼：

<script>
$(document).ready(function() {
// 當提交按鈕被點擊時
$("button").click(function() {
// 獲取輸入框的值
var inputText = $("input").val();
// 構建JSON數據
var jsonData = {
"input": inputText
};
// 發送Ajax請求
$.ajax({
url: "/controller",
type: "POST",
contentType: "application/json",
data: JSON.stringify(jsonData),
success: function(response) {
// 請求成功后的回調函數
console.log(response);
},
error: function(xhr, status, error) {
// 請求失敗后的回調函數
console.log(xhr.responseText);
}
});
});
});
</script>

上述代碼中，我們首先通過jQuery選擇器獲取到輸入框的值，并將其賦給一個變量。然后，我們以JSON格式構建一個數據對象，將輸入框的值存儲在其中。接下來，我們使用Ajax函數發送一個POST請求到指定的控制器地址，同時將JSON數據作為請求體發送給后端。在成功回調函數中，我們可以處理后端返回的數據，比如將其顯示在頁面上或進行其他相關操作。在請求失敗回調函數中，我們可以打印出錯誤信息以便調試。

例如，假設我們有一個后端控制器，可以接收到上述請求并對輸入的內容進行處理。代碼如下：

@RequestMapping(value = "/controller", method = RequestMethod.POST)
@ResponseBody
public String handleAjaxRequest(@RequestBody InputData inputData) {
// 在這里對輸入的內容進行處理
String input = inputData.getInput();
// ...
// 返回處理結果
return "Success";
}

在上述代碼中，我們使用Spring MVC框架提供的@RequestBody注解來接收請求體中的JSON數據，并將其映射為Java對象。然后，我們可以對接收到的數據進行相關的處理，比如保存到數據庫或進行其他業務邏輯操作。最后，我們可以返回一個處理結果，比如返回一個字符串"Success"。

總結一下，通過使用Ajax提交JSON數據到控制器，我們可以方便地實現前后端的數據交互。前端通過jQuery的Ajax函數發送請求，并將JSON數據作為請求體發送給后端控制器，在后端控制器中對接收到的數據進行處理，并返回一個處理結果。通過這種方式，我們可以實現動態的用戶交互和數據更新。