隨著Web應用程式的不斷發展，Ajax成為了一個強大的工具，可以實現無需頁面刷新而與伺服器進行通訊。使用Ajax，可以提高Web應用程式的效能和可用性，提高使用者體驗。
本文將介紹如何使用PHP和jQuery建立Ajax應用程式。我們將建立一個簡單的查詢頁面，使用者可以在該頁面上輸入關鍵字，並使用Ajax技術將其傳送到伺服器。伺服器將搜尋資料庫，並傳回相關結果，這些結果將在網頁上動態顯示出來，而無需重新載入。
在開始之前，請確保已經安裝了PHP和jQuery，我們將使用PHP來處理查詢請求，並使用jQuery來傳送Ajax請求和處理回傳結果。
步驟一：建立HTML文件
首先，我們需要建立一個HTML文件，作為我們的查詢頁面。以下是一個基本的HTML檔案模板，它包括一個文字方塊和一個按鈕。
<!DOCTYPE html>
<html>
<head>
<title>Ajax Search</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//Ajax代码将放在这里
</script>
</head>
<body>
<h1>Ajax Search</h1>
<input type="text" id="keyword" name="keyword" placeholder="Enter Keyword">
<button id="search">Search</button>
<div id="results">
<!-- 结果将在这里动态显示 -->
</div>
</body>
</html>登入後複製
步驟二：建立PHP文件
接下來，我們需要建立一個PHP文件，用於處理查詢請求。以下是一個處理查詢請求的範例程式碼：
<?php
//连接到数据库
$db = mysqli_connect('localhost', 'username', 'password', 'database_name');
//检查连接是否成功
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit();
}
//从查询字符串中获取关键字
$keyword = $_GET['keyword'];
//构建查询
$sql = "SELECT * FROM products WHERE name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);
//检查查询是否成功
if (!$result) {
echo 'Could not run query: ' . mysqli_error($db);
exit();
}
//将结果转换为JSON格式并输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);
//关闭连接
mysqli_close($db);
?>登入後複製
此程式碼將查詢包含關鍵字的產品，並將結果轉換為JSON格式。接下來，我們將使用jQuery發送Ajax請求和處理回傳結果。
步驟三：寫Ajax程式碼
現在，我們可以將上面的程式碼組合起來，以創建一個完整的Ajax應用程式。以下是我們的jQuery程式碼：
$(document).ready(function() {
$('#search').click(function() {
var keyword = $('#keyword').val();
// 发送Ajax请求
$.ajax({
url: 'search.php',
dataType: 'json',
data: {
keyword: keyword
},
success: function(data) {
// 处理返回的结果
var results = '';
$.each(data, function(index, value) {
results += '<div>';
results += '<h3>' + value['name'] + '</h3>';
results += '<p>' + value['description'] + '</p>';
results += '<p>Price: ' + value['price'] + '</p>';
results += '</div>';
});
$('#results').html(results);
},
error: function(jqxhr, textStatus, error) {
// 处理错误
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
}
});
});
});登入後複製
此程式碼包括一個點擊事件，當使用者點擊搜尋按鈕時，它將獲取關鍵字，並使用Ajax發送請求。請求將發送到search.php文件，該文件將查詢資料庫並傳回結果以JSON格式。一旦成功接收到結果，我們將使用jQuery動態建立結果的HTML，並在頁面上顯示。
我們定期使用jQuery的$.ajax方法處理非同步請求，可以取得許多高階控制，並且可以以非常簡單的方式處理所有類型的資料。
這裡要注意的是jQuery中ajax的success和error這兩個回呼函數。其中success表示成功回呼，error表示異常回呼。所以，當伺服器成功傳回資料時，該資料將會傳遞到success回呼函數中，然後我們的業務邏輯程式碼將來處理回傳資料。而當請求出現異常，例如伺服器被暴力破解，回傳403狀態碼時，我們的程式碼將會從error回呼函數接收到異常，並進行相關處理，例如向使用者展示異常訊息等。
步驟四：測試應用程式
現在，我們可以測試我們的應用程式。開啟HTML文件，輸入關鍵字並點擊搜尋按鈕。您應該會看到相關結果動態顯示在頁面上，而無需重新載入。
如果您遇到問題，您可以檢查控制台日誌以查看任何錯誤訊息，或查看PHP程式碼以確保其正確工作。
結論
使用PHP和jQuery，我們可以輕鬆地建立功能強大的Ajax應用程式。 Ajax使Web應用程式變得更加快速和響應，可以提高用戶體驗。現在，您可以利用PHP和jQuery創建自己的Ajax應用程序，並提高Web應用程式的效能和可用性。
以上是使用PHP和jQuery創建Ajax應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
