AJAX GET傳參數示例

本文將為您介紹如何使用AJAX GET方法傳遞參數的示例。AJAX（Asynchronous JavaScript and XML）使我們能夠通過JavaScript在后臺與服務器進行交互，無需刷新整個頁面。GET方法常用于從服務器獲取數據，因此了解如何傳遞參數是非常重要的。

假設我們有一個簡單的網站，其中有一個按鈕，點擊該按鈕將獲取特定用戶的詳細信息。我們需要在AJAX GET請求中傳遞用戶的ID作為參數，以便服務器能夠根據此ID返回對應的用戶詳細信息。

$.ajax({
url: "https://example.com/user",
method: "GET",
data: { id: 123 },
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});

上述代碼是一個AJAX GET請求的示例。在這個請求中，我們指定了要請求的URL（https://example.com/user），使用了GET方法，并通過data參數將用戶的ID設置為123。

當我們點擊按鈕時，上述AJAX請求將會被觸發。服務器將根據傳遞的ID 123 返回與該ID對應的用戶詳細信息。在這個示例中，我們通過console.log將響應打印到瀏覽器的控制臺上，但實際上我們可以根據需要進行任何操作。

讓我們繼續擴展這個示例。假設我們的網站上有一個文本框，用戶可以在其中輸入要獲取詳細信息的用戶ID。我們可以使用jQuery的val()方法來獲取文本框的值，并將其作為AJAX請求的參數。

<input type="text" id="userIdInput" />
<button id="getUserBtn">獲取用戶信息</button>
<script>
$(document).ready(function() {
$("#getUserBtn").click(function() {
var userId = $("#userIdInput").val();
$.ajax({
url: "https://example.com/user",
method: "GET",
data: { id: userId },
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});
});
});
</script>

在上述代碼中，我們使用$(document).ready()來確保文檔完全加載后再執行JavaScript代碼。當用戶點擊"獲取用戶信息"按鈕時，我們獲取文本框的值，并將其作為AJAX請求的參數傳遞給服務器。

這是一個更完整的示例，展示了使用AJAX GET方法傳遞參數的具體步驟。通過這些步驟，您可以根據需要向服務器請求特定資源，并根據服務器的響應對網站進行進一步操作。

總結來說，AJAX GET傳遞參數非常簡單，只需將參數作為JSON對象傳遞給data參數即可。在本文的示例中，我們展示了獲取特定用戶詳細信息時如何通過AJAX GET方法傳遞用戶ID作為參數。但是，您可以根據需要使用不同的參數和數據。