Ajax 是一種技術，可以在不重新加載整個頁面的情況下，動態更新網頁的內容。在使用 Ajax 進行請求時，我們常常需要傳遞參數給服務器。而 GET 方法是其中一種常見的傳遞參數的方式。本文將介紹如何使用 Ajax 同時提交 GET 參數。

在日常開發中，我們經常需要根據用戶的輸入進行搜索操作。例如，在一個電商網站中，用戶可以通過輸入關鍵字來搜索商品。當用戶輸入關鍵字并點擊搜索按鈕時，通常會向服務器發送 GET 請求，同時將關鍵字作為參數傳遞給服務器。在不使用 Ajax 的情況下，我們可以通過表單提交來實現這個功能。然而，由于表單提交會導致整個頁面的刷新，這顯然不是我們想要的效果。

// 簡單的搜索表單示例
<form action="/search" method="get"><input type="text" name="keyword" /><button type="submit">搜索</button></form>

使用 Ajax 可以實現在不刷新頁面的情況下進行搜索。一種常見的做法是通過 JavaScript 獲取用戶輸入的關鍵字，然后使用 Ajax 發送 GET 請求，并將關鍵字作為參數傳遞給服務器。

// 使用 Ajax 進行搜索示例
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault(); // 阻止表單提交的默認行為
var keyword = $('input[name="keyword"]').val();
$.ajax({
url: '/search',
type: 'get',
data: { keyword: keyword },
success: function(response) {
// 處理搜索結果
},
error: function() {
// 處理錯誤
}
});
});
});

上述代碼使用 jQuery 的 $.ajax 方法來發送 GET 請求。在 data 參數中，我們將關鍵字以鍵值對的形式傳遞給服務器。例如，如果用戶輸入的關鍵字是 "手機"，則發送給服務器的 GET 請求的 URL 為 "/search?keyword=手機"。

需要注意的是，Ajax 請求是異步的，它將在后臺發送請求并等待服務器的響應。因此，在處理搜索結果之前，我們需要在 success 回調函數中來處理服務器的響應。當搜索請求成功時，可以使用 JavaScript 來動態更新頁面的內容，例如更新搜索結果列表。

除了搜索功能，使用 Ajax 同時提交 GET 參數還可以用于其他場景。例如，我們可以根據用戶的選擇動態加載不同的內容。假設我們有一個下拉列表，其中包含不同的分類選項。當用戶選擇了某一項時，我們可以通過 Ajax 發送 GET 請求，并將選擇的分類作為參數傳遞給服務器。服務器端可以根據該參數來返回對應的數據，然后我們再將數據動態地顯示在頁面上。

// 動態加載內容示例
$('#category').change(function() {
var selectedCategory = $(this).val();
$.ajax({
url: '/load',
type: 'get',
data: { category: selectedCategory },
success: function(response) {
// 動態顯示加載的內容
},
error: function() {
// 處理錯誤
}
});
});

在上述代碼中，用戶通過選擇下拉列表中的分類選項來觸發 Ajax 請求。我們將選中的分類作為參數傳遞給服務器。服務器根據分類參數加載相應的內容，然后我們將返回的內容動態地顯示在頁面上。

總之，使用 Ajax 同時提交 GET 參數是一種常見的技術，它可以實現在不刷新整個頁面的情況下，動態更新頁面內容。無論是搜索功能還是動態加載內容，這種技術都可以為用戶提供更好的體驗。