隨著Web應用的發展，前后端的交互變得越來越常見。在前端開發中，我們常常需要與后端進行數據交互，獲取或提交數據。而Ajax是一種常用的技術，能夠在不刷新整個頁面的情況下與服務器進行數據交互。在使用Ajax進行數據交互時，傳遞參數值是一項重要的操作。本文將介紹如何使用Ajax的GET請求來傳遞參數值，并通過舉例來說明其使用方法和注意事項。

首先，讓我們來看一個簡單的例子。假設我們需要從后端API獲取某個用戶的信息，而這個用戶的ID是一個傳遞的參數，那么我們可以使用Ajax的GET請求來實現這個功能。以下是一個使用jQuery的Ajax GET請求的示例：

$.ajax({
url: 'https://api.example.com/user',
type: 'GET',
data: {
id: 123
},
success: function(response) {
// 處理返回的數據
},
error: function(xhr, status, error) {
// 處理錯誤
}
});

在這個例子中，我們通過url參數指定了后端API的地址，通過type參數指定了請求的類型為GET。而最關鍵的是data參數，它用于指定需要傳遞的參數值。在這個例子中，我們把用戶的ID指定為123。當后端接收到這個請求后，會根據傳遞的參數值來查詢相應的用戶信息，并返回給前端。

除了靜態的參數值，我們還可以使用變量來動態的傳遞參數。例如，假設我們需要根據用戶的輸入來查詢相關的信息。以下是一個使用輸入框的例子：

<input type="text" id="input" />
<button id="btn">查詢</button>
<script>
$('#btn').click(function() {
var inputVal = $('#input').val();
$.ajax({
url: 'https://api.example.com/search',
type: 'GET',
data: {
keyword: inputVal
},
success: function(response) {
// 處理返回的數據
},
error: function(xhr, status, error) {
// 處理錯誤
}
});
});
</script>

在這個例子中，我們通過元素獲取用戶的輸入值，并在點擊按鈕時觸發Ajax的GET請求。通過data參數，我們把用戶輸入的關鍵字作為參數值傳遞給后端API，以便進行查詢。在這個例子中，參數值是動態的，可以根據用戶的輸入而變化。

值得注意的是，在傳遞參數值時需要進行編碼，以確保數據的正確性和安全性。以下是一個例子：

var keyword = 'Hello world!';
var encodedKeyword = encodeURIComponent(keyword);
$.ajax({
url: 'https://api.example.com/search',
type: 'GET',
data: {
keyword: encodedKeyword
},
success: function(response) {
// 處理返回的數據
},
error: function(xhr, status, error) {
// 處理錯誤
}
});

在這個例子中，我們使用encodeURIComponent函數對關鍵字進行編碼，以確保特殊字符不會破壞URL的結構。這在傳遞包含特殊字符的參數值時特別重要，比如空格、斜杠等。

除了使用jQuery的Ajax來傳遞參數值，我們還可以使用原生的JavaScript來實現相同功能。以下是一個示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/user?id=123', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理返回的數據
}
};
xhr.send();

在這個示例中，我們使用XMLHttpRequest對象來發送GET請求，并在URL中直接包含了參數值。在readystatechange事件的回調函數中，我們可以獲取到返回的數據并進行處理。

綜上所述，使用Ajax的GET請求來傳遞參數值在前端開發中是一項常見且有用的操作。通過本文的介紹和示例，您應該能夠更好地理解如何使用Ajax來傳遞參數值，并能夠靈活應用到自己的項目中。