在前端开发中经常会遇到需要向后端传值的情况，而使用Ajax技术可以有效地实现前后端的交互。通过Ajax，我们可以在不刷新整个页面的情况下，向后端发送请求并接收响应数据。在这个过程中，我们经常需要将一些参数或数据传递给后端的Controller。本文将介绍如何使用Ajax向Controller传值，并且通过举例说明来帮助读者更好地理解。
以一个简单的示例应用为例，假设我们有一个网页中有一个按钮，点击按钮后，通过Ajax将输入框中的值传递给后端的Controller，并将返回的结果展示在页面上。我们的目标是实现这个功能。
首先，在HTML页面中，我们需要使用JavaScript监听按钮的点击事件，并通过Ajax发送请求给后端的Controller。在这个过程中，我们需要将输入框中的值作为参数传递给Controller。

html
<p>请输入内容：</p>
<input type="text" id="input">
<button onclick="sendRequest()">发送请求</button>
<p id="result"></p>
<script>
function sendRequest() {
// 获取输入框的值
var inputVal = document.getElementById("input").value;
// 创建一个新的Ajax请求
var xhr = new XMLHttpRequest();
// 设置请求的方法和url
xhr.open("POST", "/controller", true);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 设置请求的参数
var params = "inputVal=" + inputVal; // 将输入框的值作为参数传递
xhr.send(params);
// 监听请求状态的变化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 请求成功，将返回的结果展示在页面上
document.getElementById("result").textContent = xhr.responseText;
}
};
}
</script>

在上面的代码中，我们使用了原生的JavaScript来发送Ajax请求。首先，我们通过getElementById方法获取输入框的值，并将其作为参数传递给Controller。
然后，我们创建了一个新的XMLHttpRequest对象，并使用open方法设置请求的方法和url。在这个例子中，我们将请求的url设置为/controller，后端的Controller将会监听这个url。
接下来，我们设置了请求头Content-Type为application/x-www-form-urlencoded，这是因为我们传递的参数将采用这种形式。
然后，我们通过send方法发送请求，并将参数作为请求的内容发送给后端的Controller。
最后，我们通过监听readyState和status变化的方式来判断请求是否成功。如果请求成功（readyState为XMLHttpRequest.DONE且status为200），我们将返回的结果展示在页面上。
接下来，我们需要在后端的Controller中处理这个请求，并将结果返回给前端。以Java为例，我们可以使用Spring MVC框架来实现。

java
@Controller
public class MyController {
@PostMapping("/controller")
@ResponseBody
public String handleRequest(@RequestParam("inputVal") String inputVal) {
// 处理请求，并返回结果
String result = "处理结果：" + inputVal;
return result;
}
}

在上面的代码中，我们使用了@PostMapping注解来监听前端发送的请求，接收前端传递的参数inputVal。在方法体中，我们可以进行一些处理，并将处理结果返回。
同时，我们使用了@ResponseBody注解将返回的结果直接作为响应内容发送给前端。
通过以上的例子，我们可以看到，通过Ajax向Controller传递值并获取返回的结果非常简单。我们只需要将参数作为请求的内容发送，后端的Controller接收参数，进行处理并返回结果即可。
需要注意的是，通过Ajax向Controller传递值时，我们可以使用不同的请求方法（比如GET、POST等）和不同的请求参数类型（比如FormData、JSON等），具体的选择取决于项目的需求和后端的实现方式。
总结来说，使用Ajax向Controller传递值是前端开发中常见的需求。通过在JavaScript中使用XMLHttpRequest对象发送请求，并将参数作为请求的内容发送，我们可以实现前后端的交互。在后端的Controller中，我们可以接收前端传递的参数，并进行处理，然后将结果返回给前端。通过这种方式，我们可以实现动态的页面交互，并提升用户体验。