AJAX三級聯動是一種常見的前端開發技術，通過使用AJAX技術可以實現動態更新頁面內容而不需要重新加載整個頁面。本文將介紹如何利用AJAX三級聯動將數據添加到數據庫中。具體實現可以參考以下步驟：

首先，在前端頁面上創建三個下拉菜單，分別用于選擇一級、二級和三級選項。

<select id="first_level">
<option value="1">一級選項1</option>
<option value="2">一級選項2</option>
<option value="3">一級選項3</option>
</select>
<select id="second_level"></select>
<select id="third_level"></select>

然后，在JavaScript中添加事件監聽器，當一級選項改變時，動態加載對應的二級選項。

var firstLevel = document.getElementById("first_level");
var secondLevel = document.getElementById("second_level");
var thirdLevel = document.getElementById("third_level");
firstLevel.addEventListener("change", function() {
var selectedFirstLevel = firstLevel.value;
// 使用AJAX發送請求，獲取對應的二級選項數據
var xhr = new XMLHttpRequest();
xhr.open("GET", "getSecondLevelData.php?firstLevel=" + selectedFirstLevel, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var secondLevelData = JSON.parse(xhr.responseText);
// 清空當前的二級選項
secondLevel.innerHTML = "";
// 動態添加二級選項
for (var i = 0; i< secondLevelData.length; i++) {
var option = document.createElement("option");
option.value = secondLevelData[i].id;
option.innerHTML = secondLevelData[i].name;
secondLevel.appendChild(option);
}
}
};
xhr.send();
});

在服務器端，根據一級選項的值，查詢數據庫獲取對應的二級選項數據，并以JSON格式返回給前端頁面。

$selectedFirstLevel = $_GET['firstLevel'];
// 查詢數據庫，獲取對應的二級選項數據
$secondLevelData = queryDatabase($selectedFirstLevel);
// 將查詢到的數據以JSON格式返回給前端頁面
echo json_encode($secondLevelData);

接下來，當二級選項改變時，再次使用AJAX發送請求，動態加載對應的三級選項。

secondLevel.addEventListener("change", function() {
var selectedSecondLevel = secondLevel.value;
// 使用AJAX發送請求，獲取對應的三級選項數據
var xhr = new XMLHttpRequest();
xhr.open("GET", "getThirdLevelData.php?secondLevel=" + selectedSecondLevel, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var thirdLevelData = JSON.parse(xhr.responseText);
// 清空當前的三級選項
thirdLevel.innerHTML = "";
// 動態添加三級選項
for (var i = 0; i< thirdLevelData.length; i++) {
var option = document.createElement("option");
option.value = thirdLevelData[i].id;
option.innerHTML = thirdLevelData[i].name;
thirdLevel.appendChild(option);
}
}
};
xhr.send();
});

在服務器端，根據二級選項的值，查詢數據庫獲取對應的三級選項數據，并以JSON格式返回給前端頁面。

$selectedSecondLevel = $_GET['secondLevel'];
// 查詢數據庫，獲取對應的三級選項數據
$thirdLevelData = queryDatabase($selectedSecondLevel);
// 將查詢到的數據以JSON格式返回給前端頁面
echo json_encode($thirdLevelData);

最后，當三級選項確定后，可以將選中的一級、二級和三級選項的值發送到服務器端，插入到數據庫中。

thirdLevel.addEventListener("change", function() {
var selectedFirstLevel = firstLevel.value;
var selectedSecondLevel = secondLevel.value;
var selectedThirdLevel = thirdLevel.value;
// 使用AJAX發送請求，將選中的選項值發送到服務器端
var xhr = new XMLHttpRequest();
xhr.open("POST", "insertData.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = xhr.responseText;
// 處理服務器端返回的響應結果
if (response === "success") {
alert("數據已成功添加到數據庫！");
} else {
alert("數據添加失敗，請重試！");
}
}
};
xhr.send("firstLevel=" + selectedFirstLevel + "&secondLevel=" + selectedSecondLevel + "&thirdLevel=" + selectedThirdLevel);
});

通過以上的步驟，我們可以實現利用AJAX三級聯動將數據添加到數據庫中。例如，我們假設一級選項代表國家，二級選項代表省份，三級選項代表城市。當選中了國家、省份和城市后，點擊確定按鈕即可將選擇的數據添加到數據庫中。這樣的功能在很多行業中都有廣泛應用，例如地區選擇、商品分類等。

總結起來，AJAX三級聯動添加到數據庫的步驟包括創建下拉菜單并添加事件監聽器，通過AJAX發送請求獲取對應的選項數據，動態加載選項并處理返回的響應結果。通過這種方式，可以實現高效、動態地將數據添加到數據庫中。