Ajax允許用戶在不刷新整個頁面的情況下與服務器進行通信，并實現局部數據更新。為了更好地理解Ajax提交到Controller的過程，我們假設一個簡單的例子：一個在線購物網站。當用戶在網站上點擊“購買”按鈕時，我們希望通過Ajax將用戶選擇的商品信息提交到服務器端的Controller進行處理，然后將處理結果以JSON格式返回給頁面，最后通過JavaScript更新頁面上的相關內容。
// 前端代碼
$.ajax({
url: '/shopping/checkout', // 提交到的Controller的地址
type: 'POST', // 使用POST方法提交數據
dataType: 'json', // 期望返回的數據類型為JSON
data: {
product: 'iPhone 12',
price: 9999
},
success: function(response) {
// 根據返回的數據更新頁面內容
$('#cart-total').text(response.cartTotal);
$('#message').text(response.message);
},
error: function(xhr, status, error) {
console.log(error);
}
});在上述代碼中，我們使用了jQuery的$.ajax()方法來發送異步請求。首先，我們指定了要提交到的Controller的地址為“/shopping/checkout”，并設置請求方法為POST。通過設置dataType為JSON，我們告訴服務器返回的數據類型應為JSON。接下來，我們指定了要提交的數據，這里我們假設用戶購買了一個名為“iPhone 12”的商品，價格為9999元。
一旦服務器端的Controller接收到了這些數據，它可以根據具體的業務需求進行處理，例如將商品添加到購物車中或更新庫存信息。處理完畢后，Controller需要將處理結果以JSON格式返回給前端頁面。這里，我們使用一個簡單的例子來說明：在Controller中，我們將購物車中所有商品的總價和一條提示消息作為JSON格式的響應返回給前端頁面。
// 后端代碼（Java Spring MVC示例）
@RequestMapping(value = "/shopping/checkout", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> checkout(@RequestParam("product") String product, @RequestParam("price") double price) {
// 進行購物車處理邏輯，計算總價并更新庫存信息
double cartTotal = calculateCartTotal();
String message = "購買成功！";
Map<String, Object> response = new HashMap<>();
response.put("cartTotal", cartTotal);
response.put("message", message);
return response;
}在上述代碼中，我們使用了Java Spring MVC框架來實現Controller。通過@RequestMapping注解，我們指定了當用戶提交POST請求到“/shopping/checkout”時由該方法進行處理。其中，@RequestParam注解用于從請求中獲取商品名稱和價格參數。在處理完購物車邏輯后，我們創建了一個Map對象來存儲響應數據，并將其以@ResponseBody注解的形式返回給前端頁面。在這個例子中，我們將計算得到的購物車總價和購買成功的提示消息添加到響應數據中并返回。
當前端頁面成功接收到服務器返回的數據后，我們可以通過JavaScript代碼來更新頁面上的相關內容。在我們的例子中，我們將購物車的總價和提示消息分別更新到ID為“cart-total”和“message”的DOM元素中。這樣，用戶就可以實時地看到他們購買的商品總價和購買成功的提示消息，而不需要刷新整個頁面。
通過以上的例子，我們可以看到使用Ajax提交數據到Controller是一種非常便捷的方式，既方便實現異步數據傳輸，又能實現局部數據更新的功能。通過合理地運用Ajax技術，我們可以提升網頁應用程序的用戶體驗，提高用戶對網站的滿意度，進而幫助網站實現更好的業務目標。