<form id="searchForm" method="post"><input type="text" id="studentName" placeholder="請(qǐng)輸入學(xué)生姓名"><input type="button" id="searchButton" value="查詢"></form><div id="result">

上述代碼中，我們定義了一個(gè)表單和一個(gè)用于顯示查詢結(jié)果的div。通過(guò)在表單中輸入學(xué)生姓名并點(diǎn)擊查詢按鈕，將會(huì)觸發(fā)頁(yè)面上的Ajax請(qǐng)求，并將查詢結(jié)果展示在"result"這個(gè)div中。

接下來(lái)，我們需要編寫(xiě)JavaScript代碼來(lái)處理Ajax請(qǐng)求。首先，我們需要給查詢按鈕綁定一個(gè)點(diǎn)擊事件，并獲取用戶輸入的學(xué)生姓名。然后，我們使用Ajax發(fā)送請(qǐng)求到服務(wù)器并接收查詢結(jié)果。

var searchButton = document.getElementById("searchButton");
searchButton.onclick = function() {
var studentName = document.getElementById("studentName").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = document.getElementById("result");
result.innerHTML = xhr.responseText;
}
};
xhr.open("POST", "query.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("studentName=" + studentName);
};

在上述代碼中，我們首先獲取了查詢按鈕和用戶輸入的學(xué)生姓名。然后，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，用于發(fā)送Ajax請(qǐng)求。我們通過(guò)設(shè)置xhr.onreadystatechange屬性來(lái)監(jiān)聽(tīng)請(qǐng)求狀態(tài)的改變。當(dāng)readyState為4（請(qǐng)求已完成）并且status為200（請(qǐng)求成功）時(shí)，將查詢結(jié)果展示到頁(yè)面上的"result"這個(gè)div中。

需要注意的是，我們?cè)诎l(fā)送請(qǐng)求前使用xhr.setRequestHeader方法設(shè)置請(qǐng)求頭的Content-type為application/x-www-form-urlencoded。這是因?yàn)槲覀兪褂肞OST請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)，將學(xué)生姓名作為參數(shù)傳遞給服務(wù)器進(jìn)行查詢。

最后，我們需要在服務(wù)器端編寫(xiě)用于查詢數(shù)據(jù)庫(kù)的代碼。這里假設(shè)我們使用PHP來(lái)處理請(qǐng)求，并假設(shè)學(xué)生信息保存在一個(gè)名為"students"的數(shù)據(jù)庫(kù)表中。

<?php
$studentName = $_POST["studentName"];
$conn = new mysqli("localhost", "root", "password", "db_name");
if ($conn->connect_error) {
die("數(shù)據(jù)庫(kù)連接失?。? . $conn->connect_error);
}
$sql = "SELECT * FROM students WHERE name = '$studentName'";
$result = $conn->query($sql);
if ($result->num_rows >0) {
while ($row = $result->fetch_assoc()) {
echo "姓名：" . $row["name"] . " 年齡：" . $row["age"] . " 成績(jī)：" . $row["score"];
}
} else {
echo "未找到該學(xué)生的信息";
}
$conn->close();
?>

在上述PHP代碼中，我們首先獲取了前端傳遞過(guò)來(lái)的學(xué)生姓名。然后，我們創(chuàng)建了一個(gè)MySQL數(shù)據(jù)庫(kù)連接，并在連接失敗時(shí)拋出一個(gè)錯(cuò)誤。接下來(lái)，我們使用給定的學(xué)生姓名查詢"students"表，并將查詢結(jié)果逐行輸出到前端頁(yè)面。如果查詢結(jié)果為空，則輸出"未找到該學(xué)生的信息"。

通過(guò)使用Ajax，我們能夠?qū)崿F(xiàn)在數(shù)據(jù)庫(kù)查詢中獲取數(shù)據(jù)，在不刷新整個(gè)頁(yè)面的情況下動(dòng)態(tài)地展示查詢結(jié)果，提升了用戶的交互體驗(yàn)。在上述例子中，我們演示了如何通過(guò)Ajax實(shí)現(xiàn)根據(jù)學(xué)生姓名查詢學(xué)生成績(jī)的功能。通過(guò)類似的方式，我們可以實(shí)現(xiàn)更多復(fù)雜的數(shù)據(jù)庫(kù)查詢功能。