在現代的Web開發中，Ajax 是一種非常重要的技術，它可以使網頁在不刷新的情況下與服務器進行交互。當我們需要將數據傳遞給控制器時，Ajax 提供了一種簡單而強大的方法。無論是向服務器發送數據還是接收服務器返回的數據，都可以通過 Ajax 實現。本文將著重介紹如何使用 Ajax 將數據傳遞給控制器，并給出一些具體的示例。

在使用 Ajax 傳遞數據給控制器之前，我們首先需要了解它的基本原理。Ajax 是通過 XMLHttpRequest 對象來發送和接收數據的，它可以向服務器發送請求，并以異步的方式獲取服務器的響應。當我們需要將數據傳遞給控制器時，可以使用 GET 或者 POST 方法發送請求，然后將數據作為參數傳遞。

下面是一個簡單的示例，演示了如何使用 Ajax 將數據傳遞給控制器。假設我們有一個網頁，上面有一個表單，用戶可以填寫名字和年齡。當用戶點擊提交按鈕時，網頁將使用 Ajax 將這些數據發送給控制器：

// HTML 代碼
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="text" name="age" placeholder="年齡">
<button type="submit">提交</button>
</form>
// JavaScript 代碼
$('#myForm').on('submit', function(e) {
e.preventDefault(); // 阻止表單提交默認行為
var name = $('input[name="name"]').val();
var age = $('input[name="age"]').val();
$.ajax({
url: '/controller',
method: 'POST',
data: { name: name, age: age },
success: function(response) {
alert('數據已成功傳遞給控制器！');
}
});
});

在這個例子中，當用戶點擊提交按鈕時，JavaScript 代碼將抓取名字和年齡的輸入值，并使用 Ajax 發送 POST 請求到名為 "controller" 的控制器。請求的數據是一個包含名字和年齡的參數對象。當控制器成功接收到數據后，將返回一個成功的響應，JavaScript 代碼會提示用戶數據已成功傳遞給控制器。

除了使用 POST 方法外，我們也可以使用 GET 方法發送請求。GET 方法將數據附加在 URL 后面，作為查詢參數傳遞給控制器。下面是一個示例，演示了如何使用 GET 方法將數據傳遞給控制器：

// HTML 代碼
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="text" name="age" placeholder="年齡">
<button type="submit">提交</button>
</form>
// JavaScript 代碼
$('#myForm').on('submit', function(e) {
e.preventDefault(); // 阻止表單提交默認行為
var name = $('input[name="name"]').val();
var age = $('input[name="age"]').val();
$.ajax({
url: '/controller?name=' + name + '&age=' + age,
method: 'GET',
success: function(response) {
alert('數據已成功傳遞給控制器！');
}
});
});

在這個例子中，JavaScript 代碼使用 GET 方法將數據添加到 URL 后面的查詢參數中，作為請求的一部分發送給控制器?？刂破骺梢酝ㄟ^解析查詢參數來獲取數據。

總結起來，通過 Ajax 將數據傳遞給控制器可以簡化數據交互的過程，使網頁與服務器之間的通信更加高效和靈活。無論是使用 POST 方法還是 GET 方法，我們都可以輕松地將數據發送給控制器，并根據控制器的處理結果進行相應的操作。