在Web開發項目中，我們經常需要在前端界面與后端進行數據交互。而Ajax（Asynchronous JavaScript and XML）技術在這方面起到了至關重要的作用。通過Ajax，我們可以在不刷新整個頁面的情況下，與服務器進行異步通信，實現動態更新頁面內容的效果。在實際應用中，Ajax的數據傳遞過程需要通過Controller來完成。本文將介紹如何使用Ajax傳值給Controller，并給出一些具體的示例。 首先，讓我們來看一個簡單的例子。假設我們有一個頁面，上面顯示著一個按鈕和一個文本框，當點擊按鈕時，我們希望將文本框中的內容發送給服務器，并在頁面上顯示返回的結果。為了實現這個功能，我們需要編寫以下的HTML和JavaScript代碼：

HTML代碼：

<input type="text" id="myInput">
<button onclick="sendValue()">發送</button>
<div id="result"></div>

JavaScript代碼：

function sendValue() {
var inputVal = document.getElementById("myInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/myController", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
}
xhr.send("inputVal=" + inputVal);
}

在上面的代碼中，我們首先獲取了文本框中的值，然后創建了一個XMLHttpRequest對象。接下來，我們通過xhr.open方法指定了發送請求的目標URL（這里假設我們的Controller可以通過"/myController"路徑進行訪問），以及請求的方式（這里使用POST）。并且我們通過xhr.setRequestHeader方法設置了請求頭，告訴服務器我們發送的數據是以表單形式進行傳遞。然后，我們為xhr對象的onreadystatechange事件添加了一個回調函數，該回調函數在請求狀態改變時被觸發。在回調函數中，我們首先判斷請求的狀態是否已經完成（readyState為4），并且請求的狀態碼為200（表示成功）。如果滿足這兩個條件，我們將服務器返回的結果設置為頁面上一個id為"result"的div元素的innerHTML。 接下來，我們需要編寫一個Controller來處理這個請求。在Java Web應用中，通常使用框架（如Spring MVC）來創建Controller。下面是一個使用Spring MVC的簡單示例：

@Controller
public class MyController {
@RequestMapping(value = "/myController", method = RequestMethod.POST)
@ResponseBody
public String handleAjaxRequest(@RequestParam("inputVal") String inputVal) {
// 處理請求，返回結果
return "你輸入的值是：" + inputVal;
}
}

在上面的代碼中，我們使用了Spring MVC的@Controller注解來標記這個類是一個Controller。然后，我們使用@RequestMapping注解來指定處理Ajax請求的URL。這里我們指定了"/myController"路徑，并且通過method參數指定了請求的方式為POST。然后，我們使用@RequestParam注解來聲明方法參數，并且指定了請求參數的名字為"inputVal"。最后，我們使用@ResponseBody注解來將方法返回的字符串作為響應內容返回給客戶端。 通過上述代碼中的前端和后端的實現，我們就可以實現在點擊按鈕后將文本框中的內容發送給服務器，并在頁面上顯示返回的結果。這只是一個簡單的示例，實際應用中可能涉及到更加復雜的需求和處理邏輯。但是，通過這個示例，我們可以掌握使用Ajax傳值給Controller的基本方法和思路。