在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)使用Ajax技術(shù)來(lái)實(shí)現(xiàn)頁(yè)面的異步提交。當(dāng)我們使用Ajax提交數(shù)據(jù)到后臺(tái)時(shí)，如何在后臺(tái)打印出這些提交的值呢？本文將探討一種常見(jiàn)的實(shí)現(xiàn)方式，并通過(guò)具體的示例來(lái)說(shuō)明其中的原理。
一般來(lái)說(shuō)，我們可以通過(guò)后臺(tái)編程語(yǔ)言的輸出語(yǔ)句將提交的值打印出來(lái)。以PHP為例，我們可以使用echo語(yǔ)句來(lái)輸出變量的值。假設(shè)我們有一個(gè)前端頁(yè)面，其中包含一個(gè)文本框和一個(gè)提交按鈕。用戶在文本框中輸入一些內(nèi)容，點(diǎn)擊提交按鈕后，頁(yè)面會(huì)使用Ajax技術(shù)將輸入的內(nèi)容提交到后臺(tái)，后臺(tái)接收到這個(gè)值后，將其打印出來(lái)。具體的代碼如下：

html
<!-- 前端頁(yè)面 -->
<input type="text" id="inputText">
<button onclick="submitText()">提交</button>
<script>
function submitText() {
var inputValue = document.getElementById("inputText").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open("POST", "backend.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("text=" + inputValue);
}
</script>

php
// backend.php
echo $_POST["text"];

在上面的代碼中，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，JavaScript函數(shù)submitText()會(huì)被調(diào)用。該函數(shù)首先獲取文本框中的內(nèi)容，然后創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，用于向后臺(tái)發(fā)送請(qǐng)求。接著，我們通過(guò)設(shè)置xhr.onreadystatechange來(lái)監(jiān)聽(tīng)請(qǐng)求狀態(tài)的變化。當(dāng)請(qǐng)求完成時(shí)（readyState為4），并且響應(yīng)狀態(tài)為200（即成功接收到響應(yīng)），我們將響應(yīng)的文本打印到控制臺(tái)中。
在后臺(tái)代碼backend.php中，我們通過(guò)PHP的$_POST數(shù)組來(lái)獲取提交的值，并使用echo語(yǔ)句將其輸出。這樣，當(dāng)前端頁(yè)面向后臺(tái)提交數(shù)據(jù)時(shí)，后臺(tái)會(huì)將其打印出來(lái)。
除了直接在后臺(tái)輸出，我們還可以將提交的值存儲(chǔ)到數(shù)據(jù)庫(kù)中，然后從數(shù)據(jù)庫(kù)中查詢并打印出來(lái)。這種方式可以更好地保存歷史記錄，并且可以隨時(shí)再次查詢。下面是一個(gè)使用MySQL數(shù)據(jù)庫(kù)的示例代碼：

php
// backend.php
$text = $_POST["text"];
// 連接數(shù)據(jù)庫(kù)
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
// 插入數(shù)據(jù)
$sql = "INSERT INTO texts (text) VALUES ('$text')";
$conn->query($sql);
// 查詢數(shù)據(jù)
$sql = "SELECT * FROM texts";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
echo $row["text"] . "<br>";
}
$conn->close();

在上面的代碼中，我們首先獲取提交的值，并使用INSERT語(yǔ)句將其插入到名為texts的表中的text列中。然后，我們使用SELECT語(yǔ)句從表中查詢所有的數(shù)據(jù)，并使用while循環(huán)逐行打印出來(lái)。
通過(guò)以上示例，我們可以看到，無(wú)論是直接將值輸出到控制臺(tái)還是存儲(chǔ)到數(shù)據(jù)庫(kù)中再查詢，我們都可以在后臺(tái)打印出通過(guò)Ajax提交的值。這種方式不僅方便調(diào)試和查看數(shù)據(jù)，還可以幫助我們分析用戶的行為和需求，為后續(xù)的開(kāi)發(fā)工作提供參考。