使用Ajax技術獲取輸入框的值是一種常見的Web開發需求。通過Ajax，我們可以實時地獲取用戶在輸入框中輸入的值，并將其傳遞給服務器進行處理。這一功能在很多場景中都是非常有用的，比如用戶登錄、搜索引擎的自動補全功能等。下面將介紹如何使用Ajax獲取一個輸入框的值，并通過一個簡單的示例來演示其使用方法。
假設我們有一個包含一個輸入框和一個按鈕的頁面。當用戶在輸入框中輸入值，并點擊按鈕時，我們希望通過Ajax技術將輸入框的值傳遞給服務器，并在頁面上顯示服務器的響應結果。
首先，我們需要在頁面中引入jQuery庫，因為jQuery提供了簡便易用的Ajax方法。我們可以通過以下代碼片段在頁面頭部引入jQuery庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下來，我們需要將輸入框和按鈕放在一個form標簽內，以便在用戶點擊按鈕時觸發表單的提交事件。我們為輸入框和按鈕分別設置id屬性，以便在JavaScript代碼中進行操作。例如，我們可以使用以下代碼片段來創建一個輸入框和按鈕：

<form id="myForm"><br>
<input type="text" id="textInput"><br>
<button type="submit" id="submitButton">提交</button><br>
</form><br>

然后，我們可以使用jQuery的事件綁定函數來為按鈕添加點擊事件處理程序。當用戶點擊按鈕時，我們可以通過Ajax將輸入框的值發送給服務器。例如，我們可以使用以下代碼來實現點擊事件處理程序：

<script><br>
$(document).ready(function() {<br>
$("#myForm").submit(function(event) {<br>
// 阻止表單的默認提交行為<br>
event.preventDefault();<br>
<br>
// 獲取輸入框的值<br>
var inputVal = $("#textInput").val();<br>
<br>
// 發送Ajax請求給服務器<br>
$.ajax({<br>
url: "http://example.com/submit",<br>
method: "POST",<br>
data: {inputValue: inputVal},<br>
success: function(response) {<br>
// 在頁面上顯示服務器的響應結果<br>
$("#result").text(response);<br>
}<br>
});<br>
});<br>
});<br>
</script><br>

在上述代碼中，我們首先使用jQuery的事件綁定函數為form元素的submit事件添加處理程序。然后，我們阻止了表單的默認提交行為，以免頁面刷新。接下來，我們通過jQuery選擇器獲取輸入框的值，并將其保存在變量中。最后，我們通過使用jQuery的Ajax方法向服務器發送請求，并在成功回調函數中將服務器的響應結果顯示在頁面上。
通過以上代碼，我們成功實現了通過Ajax獲取輸入框的值并將其傳遞給服務器的功能。在實際應用中，我們可以根據具體的需求進行修改和擴展。例如，我們可以在成功回調函數中添加其他的邏輯，比如更新頁面的其他部分內容。
綜上所述，通過Ajax技術獲取輸入框的值是一項非常有用的Web開發技巧。它使我們能夠實時地獲取用戶輸入的數據，并將其傳遞給服務器進行處理。通過以上的示例代碼，我們可以簡單地了解到使用Ajax獲取輸入框的值的基本方法，以及如何利用服務器的響應結果更新頁面內容。希望這篇文章能夠幫助你更好地理解和使用Ajax技術。