在 Web 開發中，經常需要實現前后臺之間的數據交互。而 Ajax 是一種常用的技術，它可以在不刷新整個頁面的情況下，通過異步發送請求與后臺進行數據交互。本文將探討前臺如何通過 Ajax 技術將數據傳遞給后臺，并且結合具體的示例來說明這個過程。

在一個簡單的網頁中，用戶填寫一個表單并點擊提交按鈕，我們希望將這些數據傳遞給后臺進行處理。通過 Ajax 技術，我們可以監聽表單的提交事件，阻止默認的表單提交行為，并通過 JavaScript 代碼將表單數據傳遞給后臺。

// HTML 代碼
<form id="myForm">
<input type="text" name="username" id="username" />
<button type="submit" id="submitBtn">提交</button>
</form>

// JavaScript 代碼
const form = document.getElementById('myForm');
const submitBtn = document.getElementById('submitBtn');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表單默認提交行為
const username = document.getElementById('username').value;
// 創建 XMLHttpRequest 對象
const xhr = new XMLHttpRequest();
// 設置請求方法和請求地址
xhr.open('POST', '/api/submitUsername', true);
// 設置請求頭（可選）
xhr.setRequestHeader('Content-Type', 'application/json');
// 設置響應處理函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
// 發送請求并傳遞數據
xhr.send(JSON.stringify({ username: username }));
});

上述代碼中，我們首先獲取表單元素和提交按鈕的引用，并添加表單的提交事件監聽器。當用戶點擊提交按鈕時，表單的默認提交行為會被阻止。然后，我們獲取輸入框的值，并通過 JavaScript 的 XMLHttpRequest 對象發送 POST 請求到后臺的 "/api/submitUsername" 接口。我們還設置了請求頭為 "application/json"，以確保請求的數據以 JSON 格式傳遞。最后，通過 send() 方法發送請求，并將輸入框的值通過 JSON 字符串的形式傳遞給后臺。

在后臺，我們可以使用任何后端技術來處理這個請求，并將數據保存到數據庫或進行相應的業務邏輯處理。以 Node.js 為例：

// Node.js 代碼
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json()); // 解析請求體為 JSON
app.post('/api/submitUsername', (req, res) =>{
const username = req.body.username;
// 處理數據或執行相應的業務邏輯
res.send('提交成功');
});
app.listen(3000, () =>{
console.log('服務器啟動成功，監聽端口為 3000');
});

在上述 Node.js 代碼中，我們使用 express 框架創建了一個簡單的服務器。通過 bodyParser 中間件，我們能夠將請求體解析為 JSON 格式，以便我們可以獲取到傳遞的數據。在 "/api/submitUsername" 路由中，我們可以獲取到前臺傳遞過來的 username 值，并進行相應的處理。最后，通過 res.send() 方法，我們將響應結果發送給前臺。

通過上述示例，我們可以清楚地了解如何使用 Ajax 技術將前臺的數據傳遞給后臺，并在后臺進行處理。這種方式使得前后臺之間的數據交互更加靈活和高效，同時也提供了更好的用戶體驗。