AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用的技術。通過使用AJAX，可以在不刷新整個網頁的情況下，動態加載和顯示數據。在本文中，我們將探討如何使用AJAX打開一個頁面，并將其中的數據填充到數據庫中。

想象一下，你在一個電子商務網站上購物，并在結賬頁面填寫了一份訂單。通常情況下，當你點擊“提交訂單”按鈕時，網頁將刷新并將訂單信息發送給服務器端，然后服務器將數據存儲到數據庫中。但是，使用AJAX，我們可以實現在不刷新整個網頁的情況下，將訂單數據即時填充到數據庫中。

首先，我們需要在前端頁面中使用AJAX發送訂單數據到后端。以下是一個簡單的示例：

<script>
function submitOrder() {
var data = {
// 獲取并組裝訂單數據，可以是表單字段、頁面元素等
};
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit_order');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
alert('訂單已成功提交！');
} else {
alert('提交訂單時發生錯誤，請稍后再試。');
}
};
xhr.send(JSON.stringify(data));
}
</script>

在上面的代碼中，我們定義了一個名為submitOrder的函數，它將訂單數據包裝在一個對象中，并使用AJAX發送到服務器的/submit_order端點。我們設置了請求頭為“application/json”，以確保數據以JSON格式發送。在服務器端接收到這個請求后，我們可以使用服務器端編程語言（比如PHP、Python、Java等）來解析并處理訂單數據，并將其填充到數據庫中。

在服務器端，我們可以使用相應的編程語言和數據庫訪問技術（比如PHP的MySQLi或PDO擴展）來連接數據庫并執行插入操作。以下是一個在PHP中使用MySQLi插入訂單數據到數據庫的示例：

<?php
// 連接數據庫
$conn = new mysqli('localhost', '用戶名', '密碼', '數據庫名');
// 檢查連接
if ($conn->connect_error) {
die("連接數據庫失敗: " . $conn->connect_error);
}
// 獲取AJAX發送的訂單數據
$data = json_decode(file_get_contents('php://input'), true);
// 提取訂單數據
$productName = $data['product_name'];
$quantity = $data['quantity'];
// 可以根據需求添加更多字段
// 準備插入語句
$sql = "INSERT INTO orders (product_name, quantity) VALUES ('$productName', '$quantity')";
if ($conn->query($sql) === true) {
echo '提交成功！';
} else {
echo '提交失敗，請稍后再試。';
}
$conn->close();
?>

在上面的示例中，我們首先使用mysqli對象連接到數據庫。然后，我們使用file_get_contents和json_decode函數獲取AJAX發送的訂單數據，并通過提取字段的值將其存儲到變量中。接下來，我們使用INSERT INTO語句將訂單數據插入到數據庫中。如果插入操作成功，我們輸出“提交成功！”；否則，輸出“提交失敗，請稍后再試?！弊詈?，我們關閉數據庫連接。

綜上所述，通過使用AJAX，我們可以實現在打開頁面時即可填充數據庫的功能。無需刷新整個網頁，通過發送AJAX請求，將數據傳遞給服務器并將其插入到數據庫中。這種方法在許多實際應用中非常有用，例如在線購物、表單提交等等。