本文將介紹如何使用Ajax同時獲取數據和上傳到數據庫。在開發Web應用程序時，經常會遇到需要從服務器獲取數據并將數據上傳到數據庫的需求。傳統的方式是通過多個請求來完成這個過程，但是使用Ajax可以大大簡化這個過程。

假設我們正在開發一個在線書店的網站，并需要實現一個功能，當用戶選擇了一本書并點擊購買按鈕時，將該書的信息同時獲取并保存到數據庫中。我們可以通過使用Ajax，來實現同時獲取數據和上傳到數據庫的功能。

首先，我們需要創建一個HTML頁面，其中包含書店的書目和購買按鈕。當用戶點擊購買按鈕時，我們可以使用JavaScript代碼來觸發Ajax請求，同時獲取書的信息和將信息上傳到數據庫。

// 購買按鈕點擊事件
document.getElementById('buy-button').addEventListener('click', function() {
// 通過Ajax請求獲取書的信息
var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_book_info.php?book_id=123', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var bookInfo = JSON.parse(xhr.responseText);
// 將書的信息上傳到數據庫
var uploadData = {
bookId: bookInfo.id,
bookName: bookInfo.name,
bookPrice: bookInfo.price
};
var uploadXhr = new XMLHttpRequest();
uploadXhr.open('POST', 'save_book_info.php', true);
uploadXhr.setRequestHeader('Content-Type', 'application/json');
uploadXhr.send(JSON.stringify(uploadData));
}
};
xhr.send();
});

在上面的代碼中，我們使用了兩個AJAX請求。第一個請求通過HTTP GET方法向服務器發送請求，獲取書的信息。當請求返回成功時，我們將獲取到的書的信息保存到一個變量中，然后創建一個新的AJAX請求發送到服務器，將書的信息上傳到數據庫。

為了演示上傳數據庫的過程，我們模擬一個服務器端的接口。在服務器端，我們可以使用任何的后端語言（如PHP、Python等）來處理請求，并將數據保存到數據庫中。下面是一個PHP實例代碼：

// get_book_info.php
$bookId = $_GET['book_id'];
// 從數據庫中獲取書的信息
$bookInfo = // 從數據庫中獲取書的信息的代碼
echo json_encode($bookInfo);

// save_book_info.php
$postData = json_decode(file_get_contents('php://input'), true);
// 將書的信息保存到數據庫
// 保存到數據庫的代碼

通過以上代碼，我們可以看到，當用戶點擊購買按鈕時，先向服務器發送獲取書的信息的請求（get_book_info.php），然后將獲取到的書的信息保存到一個變量中，接著再向服務器發送上傳數據的請求（save_book_info.php），將書的信息保存到數據庫。

綜上所述，通過使用Ajax同時獲取數據和上傳到數據庫，我們可以大大簡化開發過程，提高用戶體驗。