AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上發送異步請求并更新頁面內容的前端技術。它的主要優點是能夠實現無需刷新整個頁面的數據獲取和展示功能，大大提高了用戶體驗。本文將介紹如何使用AJAX查詢數據并將結果返回到頁面上顯示。
首先，我們需要編寫一個HTML頁面，在其中加入一個按鈕和一個用于顯示結果的區域，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>AJAX查詢數據</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button id="queryBtn">查詢數據</button>
<div id="result"></div>
</body>
</html>接下來，在同一目錄下創建一個名為script.js的JavaScript文件，用于處理AJAX請求和結果的展示，代碼如下：
$(document).ready(function() {
$('#queryBtn').click(function() {
$.ajax({
url: 'data.php', // 后臺處理數據的PHP文件
type: 'GET',
dataType: 'json',
success: function(response) {
$('#result').html(response.result); // 將查詢結果顯示在result區域
},
error: function() {
alert('查詢失敗，請稍后再試。');
}
});
});
});在上述代碼中，我們使用了jQuery庫來簡化AJAX的操作。在頁面加載完成后（ready事件觸發時），我們添加了一個點擊事件處理函數。當按鈕被點擊時，會發送一個GET請求到data.php文件，并期望返回一個JSON格式的結果。
在后臺，我們需要創建一個名為data.php的文件，用于處理AJAX請求并返回結果，代碼如下：
<?php
$data = array(
'result' =>'這是一條查詢結果。'
);
echo json_encode($data);
?>以上PHP代碼創建了一個數組，并使用json_encode函數將其轉換為JSON格式的字符串。最后，通過echo語句將字符串返回給AJAX請求。
現在，當用戶點擊“查詢數據”按鈕時，AJAX請求將被發送到data.php，并且返回的結果會顯示在頁面上的“result”區域中。例如，可以將查詢結果顯示為表格、列表或其他自定義的HTML格式。
需要注意的是，以上示例是一個簡單的AJAX查詢數據并在頁面上顯示的實現方式。在實際應用中，我們需要根據具體的需求和數據結構來設計和編寫代碼，并在前后端之間進行數據交互。同時，為了提高頁面的安全性和可靠性，建議對用戶輸入進行合法性檢查和防御性編程。
總的來說，AJAX是一種非常方便和強大的前端技術，可以實現在頁面上查詢數據并動態展示，增強用戶體驗。通過以上示例，我們可以了解到如何利用AJAX發送異步請求、處理響應數據，并將結果展示在網頁上的功能。希望本文對您有所幫助。