AJAX（Asynchronous JavaScript and XML）是一種在Web開發中常用的技術，它可以實現異步加載數據并更新頁面內容，而無需刷新整個頁面。本文將介紹如何使用AJAX將值傳遞到下一個頁面，并通過舉例說明來解釋其原理。

在使用AJAX將值傳遞到下一個頁面的過程中，我們可以利用URL參數或者通過POST請求發送數據。假設我們有一個表單頁面，其中包含一個輸入框和一個提交按鈕，我們希望將用戶輸入的值傳遞到另一個頁面并顯示出來。

<form id="myForm" method="post" action="nextpage.html">
<input type="text" id="inputValue" name="inputValue">
<button type="submit">提交</button>
</form>

上述代碼中，我們使用了一個表單，并設置了表單的提交方法為POST，目標頁面為nextpage.html。表單中包含了一個輸入框和一個提交按鈕。此時，我們需要使用JavaScript來監聽表單的提交動作，并通過AJAX將輸入框的值傳遞到目標頁面。

document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // 阻止表單的默認提交行為
var inputValue = document.getElementById("inputValue").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("值已成功傳遞到下一個頁面");
}
};
xhttp.open("POST", "nextpage.html", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("inputValue=" + inputValue);
});

上述代碼中，我們使用了addEventListener方法來監聽表單的submit事件。在事件處理函數中，首先使用preventDefault方法阻止表單的默認提交行為。然后，獲取輸入框的值，并創建一個XMLHttpRequest對象。在XMLHttpRequest的回調函數中，判斷請求是否成功，并在控制臺輸出相應的提示信息。

需要注意的是，在發送AJAX請求時，需要使用open方法指定請求的類型、URL以及是否異步發送。在這里，我們使用POST方法發送請求，并將輸入框的值作為參數傳遞。同時，還需要設置Content-type請求頭來指定發送的數據類型。最后，使用send方法發送請求。

當用戶在輸入框中輸入值并點擊提交按鈕時，表單將被提交，AJAX請求也會被發送。在下一個頁面（nextpage.html）中，我們可以通過獲取URL參數或者接收POST請求的方式來獲取前一個頁面傳遞的值并進行處理。

var urlParams = new URLSearchParams(window.location.search);
var inputValue = urlParams.get('inputValue');
console.log("上一個頁面傳遞的值為：" + inputValue);

上述代碼中，我們使用URLSearchParams對象來獲取URL中的參數。首先，我們實例化一個URLSearchParams對象，并將window.location.search作為參數傳入。然后，使用get方法獲取指定參數的值。在這個例子中，我們獲取了名為inputValue的參數，并將其輸出到控制臺。

除了使用URL參數的方式，我們也可以通過接收POST請求的方式來獲取前一個頁面傳遞的值。在目標頁面（nextpage.html）的服務器端代碼中，我們可以根據需要使用不同的編程語言來處理POST請求并獲取相應的值。

綜上所述，通過使用AJAX將值傳遞到下一個頁面可以實現在不刷新整個頁面的情況下更新頁面內容。我們可以利用URL參數或者通過POST請求發送數據，并在目標頁面中進行相應的處理。