本文將介紹如何使用Ajax提交Base64編碼的數據。Ajax是一種用于在不刷新整個頁面的情況下向服務器發送請求和接收響應的技術。而Base64是一種用來將二進制數據轉換為可讀文本的編碼方式。通過將Base64編碼的數據提交給服務器，我們可以實現在不刷新頁面的情況下上傳圖片或其他二進制文件。

假設我們有一個網頁表單，用戶可以在表單中選擇一張圖片并上傳。用戶選擇完圖片后，我們可以通過JavaScript將圖片轉換成Base64編碼。然后，我們可以使用Ajax將Base64編碼的數據提交給服務器以進行處理。

function uploadImage() {
var input = document.getElementById("imageInput");
var file = input.files[0];
var reader = new FileReader();
reader.onloadend = function() {
var base64 = reader.result;
// 使用Ajax將Base64編碼的數據提交給服務器
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功
console.log("Image uploaded successfully");
}
};
xhr.send("image=" + encodeURIComponent(base64));
};
reader.readAsDataURL(file);
}

在上面的代碼中，我們首先獲取用戶選擇的圖片文件。然后創建一個FileReader對象，并使用它讀取圖片數據。當讀取完成后，我們可以使用reader.result獲取Base64編碼的數據。

接下來，我們創建一個XMLHttpRequest對象，通過調用open方法指定請求的URL和請求的方法（這里使用POST方法）。然后我們設置請求頭，指明請求體的格式為application/x-www-form-urlencoded。

在設置了readystatechange事件的回調函數后，我們調用send方法發送請求。請求體的數據格式為"image=" + encodeURIComponent(base64)，這樣服務器就可以通過解碼Base64來獲取原始的圖片數據。

當服務器收到請求后，就可以根據實際需求對接收到的圖片數據進行處理。例如，我們可以將接收到的圖片保存到服務器的文件系統中，或者對圖片進行進一步的處理。

總結來說，通過使用Ajax提交Base64編碼的數據，我們可以實現在不刷新頁面的情況下上傳圖片或其他二進制文件。在代碼示例中，我們使用了JavaScript中的FileReader對象將圖片轉換為Base64編碼，然后通過XMLHttpRequest對象將Base64編碼的數據發送給服務器。這種方法簡單且高效，適用于大多數前端開發場景。