AJAX和MVC是現代web開發中常用的技術。在開發過程中，我們經常需要從數據庫中查詢數據，并在頁面上展示給用戶。本文將介紹如何使用AJAX和MVC實現查詢數據庫數據的功能。

假設我們有一個學生信息的數據庫，其中包含學生的ID、姓名和成績。我們希望能夠通過在頁面上輸入學生ID，來查詢該學生的姓名和成績。首先，在前端頁面上，我們需要添加一個輸入框和一個按鈕，用于輸入學生ID并觸發查詢操作。例如：

<input type="text" id="studentId" placeholder="請輸入學生ID" />
<button id="searchBtn" onclick="searchStudent()">查詢</button>

在前端的JavaScript代碼中，我們可以使用AJAX來發送一個HTTP請求到后端，來查詢具體的學生信息。例如：

function searchStudent() {
var studentId = document.getElementById('studentId').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理服務器返回的數據
// 這里可以使用MVC模式來處理數據，并將結果渲染到頁面上
}
};
xhr.open('GET', 'search.php?studentId=' + studentId, true);
xhr.send();
}

在后端的服務器代碼中，我們可以使用MVC模式來處理查詢請求，并從數據庫中查詢對應的學生信息。例如：

class StudentController {
public function search($studentId) {
// 查詢數據庫中的學生信息
// ...
// 查詢結果可以存儲在一個數組中，包括姓名和成績兩個字段
$result = ['name' =>'張三', 'score' =>90];
return $result;
}
}

在后端的服務器代碼中，我們可以使用MVC模式來處理查詢請求，并從數據庫中查詢對應的學生信息。例如：

class StudentController {
public function search($studentId) {
// 查詢數據庫中的學生信息
// ...
// 查詢結果可以存儲在一個數組中，包括姓名和成績兩個字段
$result = ['name' =>'張三', 'score' =>90];
return $result;
}
}

最后，在前端的JavaScript代碼中，我們可以使用MVC模式來處理查詢結果，并將查詢結果渲染到頁面上。例如：

function searchStudent() {
var studentId = document.getElementById('studentId').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
var result = JSON.parse(response);
// 使用MVC模式處理查詢結果
var name = result.name;
var score = result.score;
// 將結果渲染到頁面上
document.getElementById('result').innerHTML = '姓名：' + name + '；成績：' + score;
}
};
xhr.open('GET', 'search.php?studentId=' + studentId, true);
xhr.send();
}

通過以上的代碼，我們實現了使用AJAX和MVC來查詢數據庫中的學生信息，并將查詢結果展示在頁面上。這種方法可以有效地將前端和后端的邏輯進行分離，提高開發效率和代碼的可維護性。