AJAX 是一種常用的前端技術(shù)，可以實(shí)現(xiàn)在不刷新整個(gè)頁(yè)面的情況下，與服務(wù)器進(jìn)行數(shù)據(jù)交互。在網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常需要將用戶上傳的圖片存儲(chǔ)到數(shù)據(jù)庫(kù)中，并在需要的時(shí)候從數(shù)據(jù)庫(kù)中讀取出來(lái)顯示在頁(yè)面上。本文將探討如何使用 AJAX 技術(shù)實(shí)現(xiàn)存儲(chǔ)和讀取數(shù)據(jù)庫(kù)中圖片的路徑。

假設(shè)我們有一個(gè)簡(jiǎn)單的圖片上傳網(wǎng)頁(yè)，用戶在表單中選擇一張圖片后點(diǎn)擊“上傳”按鈕。我們希望將這張圖片存儲(chǔ)到數(shù)據(jù)庫(kù)中，并顯示在頁(yè)面上。首先，我們需要一個(gè)后端接口接收并處理用戶上傳的圖片，將其保存到數(shù)據(jù)庫(kù)中。以下是一個(gè)示例的后端代碼：

// PHP 后端代碼
if(isset($_FILES["image"])) {
$file = $_FILES["image"];
$tempPath = $file["tmp_name"];
$fileName = $file["name"];
$filePath = "uploads/" . $fileName;
move_uploaded_file($tempPath, $filePath);
// 將文件路徑保存到數(shù)據(jù)庫(kù)中
$db->query("INSERT INTO images (path) VALUES ('$filePath')");
}

上述代碼首先從 $_FILES 數(shù)組中獲取用戶上傳的圖片信息，包括臨時(shí)路徑和文件名。然后，將圖片移動(dòng)到指定的路徑，并將路徑保存到數(shù)據(jù)庫(kù)中。在這個(gè)例子中，我們將圖片保存到名為 "uploads" 的文件夾中，并在數(shù)據(jù)庫(kù)的 "images" 表中添加一條新的記錄。

在前端頁(yè)面，我們需要使用 AJAX 技術(shù)向后端接口發(fā)送圖片，并接收后端返回的圖片路徑。以下是一個(gè)示例的前端代碼：

// JavaScript 前端代碼
function uploadImage() {
var fileInput = document.getElementById("image-input");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var imagePath = response.path;
// 在頁(yè)面上顯示圖片
var imageElement = document.getElementById("uploaded-image");
imageElement.src = imagePath;
}
};
xhr.send(formData);
}

上述代碼首先獲取用戶選擇的圖片文件，并使用 FormData 對(duì)象將文件添加到請(qǐng)求中。然后，創(chuàng)建 XMLHttpRequest 對(duì)象，并設(shè)置請(qǐng)求的方法、URL 和異步標(biāo)志。在接收到服務(wù)器響應(yīng)時(shí)，解析返回的 JSON 數(shù)據(jù)，獲取圖片路徑，并將路徑設(shè)置為頁(yè)面上一個(gè)具有 id 為 "uploaded-image" 的圖像元素的 src 屬性值。

綜上所述，通過(guò) AJAX 技術(shù)，我們可以實(shí)現(xiàn)以不刷新整個(gè)頁(yè)面的方式將用戶上傳的圖片存儲(chǔ)到數(shù)據(jù)庫(kù)，并在需要的時(shí)候從數(shù)據(jù)庫(kù)中讀取出來(lái)顯示在頁(yè)面上。在實(shí)際開(kāi)發(fā)過(guò)程中，我們可以根據(jù)具體的需求和技術(shù)棧進(jìn)行相應(yīng)的適配和優(yōu)化，以達(dá)到更好的用戶體驗(yàn)。