本文將介紹如何使用Ajax完成省市三級聯動。三級聯動是指在一個下拉框被選擇后，另一個下拉框的內容會發生變化。比如，在選擇了一個省份后，城市下拉框會動態更新為該省份下的城市列表。
使用Ajax可以實現無需刷新頁面，即可獲取數據并更新網頁內容。在實現省市三級聯動時，我們可以通過Ajax向服務器發送請求，獲取到相應省份或城市的數據，然后更新下拉框的選項。
首先，我們需要準備一個包含了所有省份和城市數據的數據庫表。在該表中，我們可以設立三個字段：id、name和parent_id。id字段表示唯一的標識符，name字段表示省份或城市的名稱，parent_id字段表示所屬省份的id。比如，北京市的parent_id就是北京市所屬的省份的id。
CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `parent_id` int(11) NOT NULL, PRIMARY KEY (`id`), FOREIGN KEY (`parent_id`) REFERENCES `province`(`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
接下來，我們需要編寫前端頁面代碼。我們可以使用HTML和JavaScript來創建省市三級聯動的效果。首先，我們創建兩個下拉框，分別用于顯示省份和城市信息。
然后，我們編寫JavaScript代碼來處理下拉框的選項更新。當選擇了省份時，我們使用Ajax發送請求到后臺獲取相應城市的數據，并更新城市下拉框的選項。
在上述代碼中，當選擇了省份時，我們獲取到選中省份的id，并將該id作為參數發送到后臺的/getCity接口。后臺返回城市數據后，我們解析JSON數據，并更新城市下拉框的選項，最后將option元素添加到citySelect中。
最后，在后臺代碼中，我們需要處理/getCity接口的請求，根據省份id獲取相應的城市數據，并將其返回給前端。
router.get('/getCity', function(req, res) {
var provinceId = req.query.provinceId;
cityModel.find({ parent_id: provinceId }, function(err, cities) {
if (err) {
res.status(500).json({ error: 'Internal server error' });
} else {
res.json(cities);
}
});
});以上就是使用Ajax完成省市三級聯動的步驟。我們首先準備好數據庫表和數據，然后在前端頁面中創建下拉框，并編寫JavaScript代碼來處理選項的更新。最后，在后臺代碼中處理請求，并返回相應的數據。通過這樣的方式，我們可以實現一個簡單而友好的省市三級聯動效果。