Ajax（Asynchronous JavaScript and XML）是一種用于在網頁中創建交互式和動態內容的技術。結合HTML，Ajax可以實現無需刷新頁面即可從服務器獲取數據，并將其顯示在頁面上。本文將探討如何使用Ajax和HTML來實現頁面跳轉并傳遞值的方法。
在許多web應用程序中，我們經常需要跳轉到另一個頁面，并且在跳轉過程中將某些值傳遞給目標頁面。以一個簡單的例子來說明：假設我們有一個頁面，其中包含一個表單，用戶在表單中輸入一些內容，并點擊按鈕提交表單。在提交表單后，我們想要將用戶輸入的內容傳遞到另一個頁面，并在該頁面上顯示。使用Ajax和HTML，我們可以輕松地實現此目標。
為了實現頁面跳轉并傳遞值，我們首先需要編寫一個JavaScript函數。這個函數將獲取用戶在表單中輸入的值，并將其發送到服務器。接下來，服務器將接收到的值發送回瀏覽器，我們可以在頁面上顯示這些值。最后，我們使用JavaScript來實現頁面跳轉，并將值傳遞給目標頁面。
首先，在HTML頁面中定義一個包含表單的
元素。用戶將在表單中輸入內容。我們為表單定義一個id，以便我們可以在JavaScript中訪問它。代碼如下所示：
<div id="myForm"> <input type="text" id="myInput" placeholder="請輸入內容"> <button onclick="submitForm()">提交</button> </div>接下來，我們將定義一個JavaScript函數submitForm()。這個函數將使用Ajax來向服務器發送數據。我們將使用XMLHttpRequest對象來實現這一點。代碼如下所示：
<script>
function submitForm() {
var inputVal = document.getElementById("myInput").value;
var xhr = new XMLHttpRequest();
var url = "目標頁面的URL";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器返回的數據
var response = xhr.responseText;
// 跳轉頁面
window.location.href = "目標頁面的URL?data=" + response;
}
};
// 發送數據
xhr.send("data=" + inputVal);
}
</script>在這個函數中，首先我們獲取用戶在表單中輸入的值。然后，我們創建一個XMLHttpRequest對象，并設置一些請求參數。我們使用open()方法來指定請求的方法（POST），目標頁面的URL，以及異步請求的方式（true）。接下來，我們使用setRequestHeader()方法來設置請求頭，以便服務器正確解析我們發送的數據。
然后，我們定義onreadystatechange事件處理程序。當請求的狀態發生變化時，這個處理程序將被調用。我們檢查xhr.readyState是否等于4（表示請求已完成）和xhr.status是否等于200（表示服務器響應成功）。如果條件滿足，我們可以獲取服務器返回的數據并將其存儲在response變量中。
最后，我們使用JavaScript中的window.location.href屬性實現頁面跳轉。我們將目標頁面的URL作為參數傳遞給window.location.href，并在URL的查詢字符串中添加值。在目標頁面中，我們可以使用JavaScript來獲取這個值，并在頁面上顯示。例如，目標頁面中的代碼如下所示：<script>
var urlParams = new URLSearchParams(window.location.search);
var data = urlParams.get("data");
// 顯示傳遞的值
document.getElementById("myData").innerHTML = "傳遞的值為：" + data;
</script>
<p>傳遞的值：<span id="myData"></span></p>在這個例子中，我們使用URLSearchParams對象來解析URL中的查詢字符串。我們使用get()方法來獲取名為"data"的值，并在頁面上顯示。
通過使用Ajax和HTML，我們可以輕松地實現頁面跳轉并傳遞值的功能。以上示例展示了如何使用JavaScript編寫一個函數，該函數使用Ajax將用戶在表單中輸入的值發送到服務器，并在跳轉到目標頁面時將這些值傳遞給目標頁面。這種方法可以廣泛應用于各種web應用程序中，幫助我們實現更好的用戶體驗。