本文將討論使用Ajax與Spring MVC進行交互的實例。Ajax（Asynchronous JavaScript and XML）是一種在沒有重新加載整個頁面的情況下，通過后臺與服務器進行數據交互的技術。Spring MVC是一種基于MVC模式的輕量級Java框架，用于構建Web應用程序。

假設我們正在開發一個在線商城，我們希望在用戶瀏覽商品時，能夠實時獲取商品的庫存量。傳統的方式是用戶點擊商品，然后等待整個頁面重新加載，這樣用戶體驗不佳。我們可以使用Ajax與Spring MVC來改進這個過程。

首先，我們需要在前端頁面中引入jQuery庫，以便使用其中的Ajax方法。假設我們在商品列表頁面中有如下代碼：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".item").click(function(){
var productId = $(this).attr("data-id");
$.ajax({
url: "/product/checkStock",
type: "GET",
data: {productId: productId},
success: function(response){
$("#stock").text(response.stock);
}
});
});
});
</script>
<div class="item" data-id="1">商品1</div>
<div class="item" data-id="2">商品2</div>
<p>庫存：<span id="stock"></span></p>

在上述代碼中，我們通過jQuery選擇器將所有商品列表項的class設置為"item"，并在每個列表項中設置一個自定義屬性"data-id"，用于存儲商品ID。當用戶點擊任意商品時，jQuery會捕獲點擊事件，并獲取該商品的ID。然后，我們通過Ajax向后臺發送GET請求，請求的URL是"/product/checkStock"。請求中包含商品ID作為參數，后臺會根據商品ID查詢庫存量。一旦服務器返回響應，成功回調函數會將庫存量更新到頁面中。

下面是Spring MVC中對應的Controller代碼：

@Controller
@RequestMapping("/product")
public class ProductController {
@Autowired
private ProductService productService;
@GetMapping("/checkStock")
@ResponseBody
public ResponseEntity<Map<String, Integer>> checkStock(@RequestParam Long productId) {
int stock = productService.getStock(productId);
Map<String, Integer> response = new HashMap<>();
response.put("stock", stock);
return ResponseEntity.ok(response);
}
}

在上述代碼中，我們使用了Spring MVC的@Controller和@RequestMapping注解來將請求映射到checkStock()方法上。該方法使用@GetMapping和@RequestParam注解來接收GET請求，并獲取前端Ajax傳遞的商品ID。通過調用ProductService中的方法，我們可以得到商品的庫存量，并將結果封裝到Map中作為JSON響應返回給前端頁面。

總結一下，通過使用Ajax與Spring MVC，我們實現了在用戶瀏覽商品時實時獲取庫存量的功能，而無需重新加載整個頁面。這樣不僅提升了用戶體驗，還減少了網絡流量和服務器資源的消耗。