在現代Web開發中，動態加載數據是一個非常常見的需求。而使用Ajax技術可以方便地實現前臺獲取數據并傳遞給后臺。下面我們將通過舉例說明Ajax前臺獲取數據傳給后臺的實現過程。
假設我們有一個網頁，其中包含一個輸入框和一個按鈕。當用戶在輸入框中輸入一段文字，點擊按鈕后，前臺會將輸入的文字發送給后臺，后臺計算文字的長度，并將結果返回給前臺。這就是我們需要實現的功能。
首先，我們需要使用HTML和CSS創建一個輸入框和按鈕的網頁。以下是相關代碼：
<!DOCTYPE html>
<html>
<head>
<title>Ajax獲取數據傳給后臺</title>
<style>
input {
margin-right: 10px;
}
.result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" id="textInput" placeholder="請輸入文本">
<button id="submitButton">提交</button>
<div class="result" id="resultText"></div>
</body>
</html>上述代碼創建了一個包含輸入框和按鈕的網頁，以及一個用來顯示結果的div元素。接下來，我們需要使用JavaScript來實現Ajax獲取數據并傳遞給后臺的功能。以下是相關代碼：
<script>
var button = document.getElementById('submitButton');
var input = document.getElementById('textInput');
var resultText = document.getElementById('resultText');
button.addEventListener('click', function () {
var text = input.value;
if (text === '') {
resultText.innerText = '請輸入文本';
} else {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/calculate', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
resultText.innerText = '輸入的文本長度為：' + response.length;
}
};
xhr.send(JSON.stringify({ text: text }));
}
});
</script>上述代碼首先獲取了按鈕、輸入框和結果顯示區的dom元素，然后監聽按鈕的點擊事件。當按鈕被點擊時，首先獲取輸入框中的文本。如果文本為空，則在結果顯示區顯示一個提示信息；否則，通過XMLHttpRequest對象創建一個Ajax請求，將輸入的文本發送給后臺的'/calculate'接口，并指定Content-Type為application/json。然后，監聽xhr對象的onreadystatechange事件，當請求完成并返回結果時，將結果顯示在結果顯示區。
最后，我們需要在后臺實現'/calculate'接口的功能。以下是Node.js后臺代碼的示例：
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.post('/calculate', function (req, res) {
var text = req.body.text;
if (!text) {
res.status(400).send('請輸入文本');
} else {
var length = text.length;
res.send({ length: length });
}
});
app.listen(3000, function () {
console.log('Server is running on port 3000');
});上述代碼使用Express框架創建了一個Node.js服務器，并使用body-parser中間件解析請求體。然后，將'/calculate'接口的實現綁定到POST方法上，獲取請求中的text屬性并計算其長度，然后將結果返回給前臺。
通過上述示例，我們可以看到如何使用Ajax技術實現前臺獲取數據并傳遞給后臺的功能。這樣可以使我們的Web應用程序更加動態和交互。