Ajax是一種前端技術，可以通過異步請求從服務器獲取數據，而不用刷新整個頁面。Json是一種輕量級數據交換格式，常用于前后端數據傳輸。結合Ajax和Json，我們可以實現實時的數據查詢功能。本文將介紹如何使用Ajax和Json進行數據查詢，并通過舉例說明其用法和優勢。

假設我們有一個在線商城網站，用戶可以在該網站上搜索商品并獲取相關信息。傳統的做法是當用戶輸入關鍵詞后，將請求發送到服務器，服務器根據關鍵詞查詢數據庫并將結果返回給用戶。這個過程需要刷新整個頁面，用戶體驗較差。現在我們可以使用Ajax和Json來改進這個功能。

$.ajax({
url: 'search.php',
type: 'GET',
data: {keyword: '手機'},
dataType: 'json',
success: function(response) {
// 處理返回的數據
// 更新頁面上的商品列表
}
});

以上是一個簡單的Ajax請求示例。我們向服務器發送一個GET請求，參數包括搜索關鍵詞。服務器返回的數據格式為Json。成功接收到服務器返回的數據后，我們可以對數據進行處理，然后更新頁面上的商品列表。

使用Ajax和Json進行數據查詢有以下優勢：

• 更快速的數據獲取：異步請求不需要刷新整個頁面，只需要更新部分內容，可以大大提高用戶體驗。
• 減少服務器負載：由于只請求數據而不需要完整的頁面內容，服務器的負載更小。
• 前后端分離：通過Json數據交換，前后端開發可以更獨立，提高項目開發效率。

下面舉一個實例來說明如何使用Ajax和Json進行數據查詢。

$.ajax({
url: 'search.php',
type: 'GET',
data: {keyword: '手機'},
dataType: 'json',
success: function(response) {
if (response.length >0) {
// 有查詢結果
var resultHtml = '';
for (var i = 0; i< response.length; i++) {
resultHtml += '
' + response[i].name + '
';
}
$(".product-list").html(resultHtml);
} else {
// 沒有查詢結果
$(".product-list").html("沒有找到相關商品");
}
}
});

在上述例子中，我們向服務器發送GET請求，參數為關鍵詞"手機"。服務器返回的數據是一個Json數組，包含了相關商品的信息。在成功接收到數據后，我們根據數據的長度判斷是否有查詢結果。如果有查詢結果，我們通過遍歷數組將商品的名稱顯示在頁面上的.product-list元素內；如果沒有查詢結果，我們顯示"沒有找到相關商品"。

通過上述例子，我們可以看到使用Ajax和Json進行數據查詢的簡潔且高效的方式。通過異步請求和數據交換，我們可以實現實時的數據查詢功能，提高用戶體驗，減少服務器負載，同時實現前后端分離，提高項目開發效率。