在現代的 Web 開發中，Ajax 技術扮演著一個重要的角色。它使得我們能夠在不重新加載整個頁面的情況下，通過異步方式與服務器進行數據交互。本文將重點介紹如何使用 Ajax 提交數據到當前控制器，并通過一些具體的例子加以說明。

假設我們的網站需要一個表單，用戶通過提交表單來添加評論。在傳統的方式下，用戶提交表單后，網頁會重新加載并顯示添加評論后的頁面。而使用 Ajax 技術，我們可以在用戶提交表單后，將評論異步地發送到服務器，并在頁面中動態地顯示這個新的評論，而不需要重新加載整個頁面。

首先，我們要通過 JavaScript 創建一個 XMLHttpRequest 對象，并通過其 open() 方法指定一個 HTTP 請求的類型和 URL，以及是否以異步的方式發送請求。下面是一個使用純 JavaScript 實現的函數，通過 Ajax 提交數據到當前控制器的示例：

function submitData() {
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 指定 HTTP 請求的類型和 URL（假設控制器的路由為 /submit）
xhr.open('POST', '/submit', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/json');
// 監聽請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，根據返回的數據進行相應的處理
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
// 準備要發送的數據
var data = {
name: 'John',
comment: 'This is a great article!'
};
// 發送請求
xhr.send(JSON.stringify(data));
}

在這個示例中，我們通過 XMLHttpRequest 對象將一個包含用戶姓名和評論的 JSON 對象發送到當前控制器的 /submit 路由。當服務器成功處理這個請求并返回 200 狀態碼時，我們可以根據服務器返回的數據進行相應的處理。

接下來，讓我們通過一個實際的例子來更加具體地說明使用 Ajax 提交數據到當前控制器的過程。假設我們正在開發一個電子商務網站，用戶可以在商品詳情頁中添加商品到購物車。我們的任務是通過 Ajax 將商品添加到購物車，并在頁面上動態地顯示已添加的商品數量。

// 假設在頁面上有一個按鈕和一個顯示購物車數量的元素
var addToCartBtn = document.getElementById('add-to-cart');
var cartCountEl = document.getElementById('cart-count');
addToCartBtn.addEventListener('click', function() {
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 指定 HTTP 請求的類型和 URL（假設控制器的路由為 /add-to-cart）
xhr.open('POST', '/add-to-cart', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/json');
// 監聽請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，根據返回的數據進行相應的處理
var response = JSON.parse(xhr.responseText);
cartCountEl.innerHTML = response.cartCount;
}
};
// 準備要發送的數據
var data = {
productId: 12345,
quantity: 1
};
// 發送請求
xhr.send(JSON.stringify(data));
});

在這個示例中，用戶點擊頁面上的一個按鈕（假設該按鈕的 ID 是 'add-to-cart'），觸發一個事件監聽器，該監聽器會執行一個函數。在該函數中，我們使用上述提到的方法創建一個 XMLHttpRequest 對象，并將一個包含商品ID和數量的 JSON 對象發送到當前控制器的 /add-to-cart 路由。當服務器成功處理這個請求并返回 200 狀態碼時，我們將服務器返回的購物車數量更新到頁面上的元素（假設該元素的 ID 是 'cart-count'）。

通過上述例子，我們可以看到如何使用 Ajax 提交數據到當前控制器，并在服務器返回成功響應后，根據返回的數據進行相應的操作。這種方式不僅提升了用戶體驗，還能提高網站的性能。希望本文能幫助你更好地理解和應用 Ajax 技術。