在前端開發(fā)中，我們經常會使用AJAX（Asynchronous JavaScript and XML）來實現(xiàn)異步數據交互。在某些情況下，我們可能需要將一個頁面中的數據傳遞給另一個頁面進行處理。本文將詳細介紹如何使用AJAX傳輸數據，并在接收頁面中獲取這些值。 假設我們有一個頁面A，其中有一個輸入框用于輸入用戶名，并有一個按鈕用于提交表單數據。當用戶點擊按鈕時，我們將通過AJAX將輸入框中的值發(fā)送給后臺。接下來我們需要在頁面B中接收這些值，并進行相應的處理。 在頁面A中，我們可以使用以下代碼通過AJAX向后臺發(fā)送數據：

var username = document.getElementById("username").value; // 獲取用戶名輸入框的值
var xhr = new XMLHttpRequest(); // 創(chuàng)建XMLHttpRequest對象
xhr.open("POST", "backend.php", true); // 設置請求方法、地址和異步標識
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 設置請求頭
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText); // 發(fā)送成功后的回調函數，可以在控制臺中查看返回的數據
}
};
xhr.send("username=" + username); // 發(fā)送請求

在上述代碼中，我們首先獲取了用戶名輸入框的值，并創(chuàng)建了一個XMLHttpRequest對象來發(fā)送AJAX請求。接著，我們通過open()方法設置請求的方法（POST）、地址（"backend.php"）和異步標識（true）。然后，我們使用setRequestHeader()方法設置了請求頭的Content-type，表明發(fā)送的數據是一種表單形式。在發(fā)送請求之前，我們?yōu)閄MLHttpRequest對象的onreadystatechange屬性指定了一個回調函數，以便在請求完成后執(zhí)行相應的操作。最后，我們使用send()方法發(fā)送了請求，并將用戶名作為參數傳遞給后臺。 在接收頁面B中，我們可以使用以下代碼來獲取AJAX傳過來的值：

var urlParams = new URLSearchParams(window.location.search); // 獲取URL中的參數
var username = urlParams.get("username"); // 獲取參數中的username值
console.log(username); // 在控制臺中打印獲取到的值

在上述代碼中，我們使用URLSearchParams對象來獲取URL中的參數。首先，我們通過window.location.search獲取到包含參數的字符串。然后，使用URLSearchParams對象將其解析為可操作的參數對象。接著，我們使用get()方法獲取到參數中的username的值，并將其打印在控制臺中。 舉例來說，如果在頁面A中，用戶輸入了用戶名"John"并點擊了提交按鈕，AJAX將發(fā)送一個POST請求到后臺的"backend.php"頁面，并將數據傳遞給后臺。在頁面B中，我們可以通過上述代碼獲取到"John"并進行相關的處理。 總結起來，通過使用AJAX我們可以方便地將一個頁面中的數據傳遞給另一個頁面進行處理。在發(fā)送頁面中，我們使用XMLHttpRequest對象發(fā)送AJAX請求并將數據作為參數傳遞給后臺。在接收頁面中，我們可以使用URLSearchParams對象來獲取URL中的參數，并提取出需要的數據進行后續(xù)處理。通過這種方式，我們可以實現(xiàn)前后臺之間的無縫數據傳遞和交互。