Ajax是一種在Web開發中常用的技術，它可以實現在不刷新整個頁面的情況下，對頁面的局部進行更新。而將Ajax傳遞的值傳遞到跳轉頁面上，可以進一步提高用戶的體驗和交互性。本文將介紹如何通過Ajax將傳遞的數據顯示在跳轉后的頁面上，并通過舉例加以說明，以幫助讀者更好地理解。 當我們在網頁上填寫表單或進行一些操作時，經常會有需要將這些操作結果傳遞到另一個頁面上進行展示或處理的情況。一般而言，我們可以通過form表單提交數據或者使用URL參數傳遞數據的方式來實現。然而，這些傳統的方式都需要頁面重新加載，用戶體驗不佳。而通過Ajax實現傳值到跳轉頁面，可以在不刷新整個頁面的情況下，將傳遞的數據顯示在新的頁面上，給用戶帶來更好的體驗。 舉個例子來說明，假設我們有一個網頁，其中包含一個輸入框和一個按鈕，用戶可以在輸入框中輸入一段文字，然后點擊按鈕提交。我們希望將用戶輸入的文字傳遞到跳轉的頁面上并顯示出來。 首先，在輸入框和按鈕的HTML代碼如下：

<input type="text" id="inputText">
<button onclick="submitData()">提交</button>

這里的輸入框使用id屬性為"inputText"，按鈕的點擊事件綁定了一個名為submitData的JavaScript函數。接下來，我們需要實現submitData函數，使用Ajax將輸入框的值傳遞到跳轉的頁面上。

function submitData() {
var inputValue = document.getElementById("inputText").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = "跳轉的頁面URL?data=" + inputValue;
}
};
xmlhttp.open("GET", "處理Ajax請求的服務器端腳本URL", true);
xmlhttp.send();
}

在submitData函數中，我們首先獲取輸入框的值inputValue。接著，創建一個XMLHttpRequest對象xmlhttp，并設置其onreadystatechange屬性為一個匿名函數。在這個匿名函數中，我們通過判斷xmlhttp對象的readystate和status屬性，來確保Ajax請求已經完成且響應成功。當請求成功后，我們使用window.location.href將頁面跳轉到指定的頁面，并將輸入框的值作為URL參數傳遞。最后，通過調用xmlhttp的open和send方法，將請求發送到服務器端腳本進行處理。 在跳轉的頁面上，我們可以通過獲取URL參數的方式，將傳遞的數據顯示出來。示例代碼如下：

var url = new URL(window.location.href);
var data = url.searchParams.get("data");
document.write("您輸入的文字是：" + data);

以上代碼首先創建一個URL對象url，傳入跳轉頁面的URL。然后，使用url的searchParams屬性的get方法，傳入參數名"data"，獲取URL中傳遞的值data。最后，通過document.write將獲取的值顯示在頁面上。 通過以上代碼，我們成功實現了使用Ajax將傳遞的值顯示在跳轉頁面上。用戶在輸入框中輸入文字并點擊提交按鈕后，頁面跳轉到特定的頁面，并將輸入的文字顯示出來。 總結一下，通過Ajax傳值到跳轉頁面上，可以在不刷新整個頁面的情況下，將傳遞的數據顯示在新的頁面上，提高用戶的體驗和交互性。本文通過舉例加以說明，詳細介紹了實現這一功能的步驟和代碼。讀者可以根據這些示例代碼，靈活應用到自己的項目中，實現更好的用戶交互效果。