隨著Web應用程序的發展，越來越多的功能需要在頁面上動態地加載和更新數據。為了實現無刷新的數據更新，AJAX（Asynchronous JavaScript and XML）技術應運而生。AJAX通過在后臺與服務器進行少量的數據交換，實現了在不刷新整個頁面的情況下更新部分頁面。本文將介紹如何使用AJAX獲取數據并將其保存到數據庫中。

AJAX與數據庫交互的常見場景之一是表單的提交。假設我們有一個簡單的表單，用戶可以填寫姓名、年齡和郵箱，并點擊提交按鈕。在傳統的Web應用程序中，表單會通過頁面刷新的方式將數據發送到服務器端。然而，使用AJAX，我們可以實現在不刷新頁面的情況下將表單數據發送到服務器端并將其保存到數據庫中。

// HTML代碼
<form id="myForm" action="save_data.php" method="POST">
<input type="text" name="name" placeholder="姓名" />
<input type="text" name="age" placeholder="年齡" />
<input type="text" name="email" placeholder="郵箱" />
<button type="button" onclick="saveFormData()">提交</button>
</form>
// JavaScript代碼
function saveFormData() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}

在上述代碼中，使用了HTML的<form>元素和相關的<input>元素來構建表單，將數據提交到服務器端的URL為"save_data.php"。通過JavaScript代碼，我們獲取了表單元素和其數據，并創建了一個FormData對象來承載表單數據。然后，我們使用XMLHttpRequest對象發送了一個異步的POST請求，并將FormData作為請求體發送到服務器端。

在服務器端的"save_data.php"文件中，我們可以獲取通過AJAX發送過來的表單數據，并將其保存到數據庫中。以下是一個使用PHP和MySQL實現的例子：

// save_data.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];
// 連接到數據庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "mydb";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 插入數據到數據庫
$sql = "INSERT INTO users (name, age, email) VALUES ('$name', '$age', '$email')";
if ($conn->query($sql) === TRUE) {
echo "數據保存成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>

在"save_data.php"文件中，我們首先通過$_POST數組獲取了通過AJAX發送過來的表單數據。然后，我們使用mysqli擴展連接到MySQL數據庫，并將接收到的數據插入到名為"users"的表中。如果插入操作成功，我們向客戶端返回"數據保存成功"；否則，我們返回錯誤信息。最后，記得關閉數據庫連接。

通過上面的例子，我們可以看到使用AJAX獲取數據并保存到數據庫非常便捷。無論是表單的提交還是其他的數據交互操作，AJAX都是一個非常實用的工具。希望本文對您理解和使用AJAX有所幫助。