AJAX 是一种在前端与后端之间进行异步通信的技术，它能够实现页面的局部刷新，提升用户体验。其中，使用 AJAX 输入传值是一种常见的应用场景。通过 AJAX 输入传值，用户在输入框中输入内容后，可以将数据实时传递给后端进行处理并返回结果，而无需刷新整个页面。本文将介绍如何使用 AJAX 输入传值，并且通过多个示例进行说明，以帮助读者更好地理解。

在使用 AJAX 输入传值之前，我们首先需要创建一个输入框和一个用于显示结果的容器。例如，我们可以创建一个简单的计算器应用，用户可以在输入框中输入两个数字，并通过 AJAX 实时传递给后端进行计算，并将结果显示在结果容器中。

<input type="text" id="num1" placeholder="请输入第一个数字">
<input type="text" id="num2" placeholder="请输入第二个数字">
<button onclick="calculate()">计算</button>
<div id="result"></div>

在以上示例中，我们创建了两个输入框，一个用于输入第一个数字，另一个用于输入第二个数字。通过onclick事件，当用户点击 "计算" 按钮时，调用calculate函数。在calculate函数中，使用 AJAX 将用户输入的两个数字传递给后端进行计算，并将计算结果显示在结果容器中。

function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
document.getElementById("result").innerText = xhr.responseText;
} else {
document.getElementById("result").innerText = "计算失败";
}
}
};
xhr.open("POST", "/calculate", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ num1: num1, num2: num2 }));
}

在calculate函数中，首先获取用户输入的两个数字，并创建一个 XMLHttpRequest 对象。然后，通过open方法指定请求的方法、URL 和是否异步处理。在这个例子中，我们使用 POST 请求方式，并将请求发送到 "/calculate" 路径。接下来，通过setRequestHeader方法设置请求头，指定请求体的内容类型为 JSON。最后，通过send方法发送请求，并通过send方法的参数将用户输入的两个数字以 JSON 格式发送给后端。

在后端，我们可以使用任何后端语言来接收并处理这个请求。例如，使用 PHP 的话，我们可以编写如下代码：

<?php
$num1 = $_POST["num1"];
$num2 = $_POST["num2"];
$result = $num1 + $num2;
echo $result;
?>

通过接收到的两个数字进行计算，将结果赋值给变量$result，并通过echo语句输出结果。这样，在 AJAX 的回调函数中，可以通过xhr.responseText获取到后端返回的结果，并将其显示在结果容器中。如果计算失败或者请求出现错误，可以通过相应的代码块进行处理。

除了基本的计算器应用之外，AJAX 输入传值还可以用于更多的应用场景。例如，我们可以创建一个搜索建议功能，当用户在搜索框中输入关键词时，根据输入的内容实时显示相应的搜索建议。通过 AJAX 输入传值，可以在用户输入的同时向后端发送请求，后端根据用户输入的关键词进行搜索，并将搜索结果返回给前端，以实现实时搜索建议的功能。

综上所述，通过 AJAX 输入传值，我们可以实现许多有趣和实用的功能。通过多个示例的说明，我们了解了如何使用 AJAX 输入传值，并学会了如何在前端和后端之间进行实时的数据传递和交互。希望本文对于读者有所帮助，并能够在实际的开发中发挥作用。