當我們在網頁中需要獲取其他頁面的數據時，常常需要通過URL傳遞參數來實現。而在使用Ajax技術實現異步數據交互時，獲取URL傳遞參數同樣是一項重要的任務。本文將介紹通過Ajax獲取URL傳遞參數的方法，并通過舉例說明其實際應用。

在Ajax中，我們可以通過JavaScript的window對象的location屬性來獲取URL。例如，當URL為"http://example.com/?name=Ajax&age=20"時，我們可以通過以下代碼獲取URL參數：

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');
console.log(name); // 輸出：Ajax
console.log(age); // 輸出：20

在上述代碼中，我們首先使用URLSearchParams對象來解析URL的查詢參數部分，即"?name=Ajax&age=20"。然后，我們可以使用get方法來獲取指定參數的值。

通過獲取URL傳遞參數，我們可以實現一些有趣的功能。例如，假設我們有一個展示商品信息的網站，每個商品都有一個唯一的ID。通過URL傳遞參數，我們可以根據商品ID獲取特定商品的詳細信息。

// 假設URL為"http://example.com/product.html?id=123"
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
// 我們可以使用Ajax發送GET請求來獲取商品詳細信息
fetch(http://example.com/api/products/${id})
.then(response => response.json())
.then(data => {
console.log(data.name); // 輸出商品名稱
console.log(data.price); // 輸出商品價格
});

在上面的示例代碼中，我們首先通過URL傳遞的參數獲取商品ID。然后，我們使用Ajax的fetch方法來發送GET請求，地址為"http://example.com/api/products/123"，其中123為獲取到的商品ID。通過Promise鏈式調用，我們可以在請求返回的響應中獲取商品的詳細信息，并按需處理。

除了獲取URL傳遞參數外，我們還可以通過Ajax來動態傳遞參數，并將其作為查詢參數添加到URL中。例如，假設我們有一個搜索功能，用戶可以輸入關鍵詞來搜索相關內容。當用戶提交搜索表單時，我們可以通過Ajax發送GET請求，并將關鍵詞作為參數傳遞給后端服務器。

const form = document.getElementById('search-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const keyword = document.getElementById('keyword').value;
// 使用Ajax發送GET請求，將關鍵詞作為參數傳遞給服務器
fetch(http://example.com/api/search?keyword=${keyword})
.then(response => response.json())
.then(data => {
// 處理返回的搜索結果
});
});

在上述代碼中，我們使用addEventListener方法為搜索表單的submit事件添加一個監聽器。在監聽器函數中，我們首先通過event對象的preventDefault方法阻止表單的默認提交行為。然后，我們獲取用戶輸入的關鍵詞，并將其作為查詢參數添加到URL中。最后，我們使用Ajax的fetch方法發送GET請求，并在成功返回后對搜索結果進行處理。

通過以上的實例，我們可以看到通過Ajax獲取URL傳遞參數的重要性和實際應用場景。無論是獲取URL參數來實現特定功能，還是動態傳遞參數以實現搜索等交互功能，Ajax都是我們的得力工具。通過深入理解和靈活運用Ajax技術，我們可以為網頁增加更多的交互性和實用性。