AJAX和HTML非常適合一起使用，可以實(shí)現(xiàn)異步的網(wǎng)頁交互，提升用戶體驗(yàn)。下面是一個(gè)簡(jiǎn)單的Ajax實(shí)例代碼，通過html頁面調(diào)用php文件來獲取數(shù)據(jù)，并在頁面中顯示：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#fetch").click(function() {
$.ajax({
url: "getdata.php",
success: function(result) {
$("#data").html(result);
}
});
});
});
</script>
</head>
<body>
<button id="fetch">獲取數(shù)據(jù)</button>
<div id="data"></div>
</body>
</html>以上代碼中，首先引用了jquery庫，隨后通過document.ready()函數(shù)和click()事件監(jiān)聽來監(jiān)聽網(wǎng)頁按鈕的點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊獲取數(shù)據(jù)按鈕時(shí)，會(huì)調(diào)用getdata.php文件并把返回結(jié)果顯示在網(wǎng)頁里。
在getdata.php文件里，可以調(diào)用數(shù)據(jù)庫等其他服務(wù)，取得數(shù)據(jù)并處理后返回給前臺(tái)頁面。下面是一個(gè)簡(jiǎn)單的php代碼：
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢測(cè)連接
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 輸出數(shù)據(jù)
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 結(jié)果";
}
$conn->close();
?>通過以上代碼實(shí)例，我們可以簡(jiǎn)單地實(shí)現(xiàn)了一個(gè)基于AJAX和HTML的網(wǎng)頁異步獲取數(shù)據(jù)的效果。