本文將介紹使用AJAX將前臺(tái)的值傳到數(shù)據(jù)庫(kù)的方法，并通過(guò)舉例說(shuō)明其實(shí)現(xiàn)過(guò)程和效果。AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器進(jìn)行異步通信的技術(shù)。它可以實(shí)現(xiàn)頁(yè)面的局部刷新，提高用戶體驗(yàn)和頁(yè)面性能。通過(guò)AJAX，我們可以將前臺(tái)的值傳遞到服務(wù)器，并將其存儲(chǔ)到數(shù)據(jù)庫(kù)中，實(shí)現(xiàn)數(shù)據(jù)的持久化。

假設(shè)我們有一個(gè)網(wǎng)頁(yè)上的表單，其中包含用戶的姓名和年齡。當(dāng)用戶填寫(xiě)完表單后，點(diǎn)擊提交按鈕，我們希望將這些值傳遞到服務(wù)器，再存儲(chǔ)到數(shù)據(jù)庫(kù)中。在不使用AJAX的情況下，我們可以通過(guò)form的action屬性和method屬性來(lái)將表單的值傳遞到服務(wù)器，然后服務(wù)器再執(zhí)行相應(yīng)的操作，最后將結(jié)果返回給前端頁(yè)面。但是這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面的刷新，用戶體驗(yàn)較差。

<form action="saveData.php" method="POST">
<input type="text" name="name" placeholder="請(qǐng)輸入姓名">
<input type="number" name="age" placeholder="請(qǐng)輸入年齡">
<input type="submit" value="提交">
</form>

為了使用AJAX將前臺(tái)的值傳遞到數(shù)據(jù)庫(kù)，我們需要通過(guò)JavaScript來(lái)處理表單的提交事件，阻止表單默認(rèn)的提交行為，然后使用AJAX向服務(wù)器發(fā)送請(qǐng)求。

// 獲取表單元素
var form = document.querySelector('form');
// 監(jiān)聽(tīng)表單的提交事件
form.addEventListener('submit', function (e) {
// 阻止表單的默認(rèn)提交行為
e.preventDefault();
// 獲取姓名和年齡的輸入值
var name = form.querySelector('input[name="name"]').value;
var age = form.querySelector('input[name="age"]').value;
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求方法和URL
xhr.open('POST', 'saveData.php', true);
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 設(shè)置回調(diào)函數(shù)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請(qǐng)求成功后的操作
console.log(xhr.responseText);
}
};
// 發(fā)送請(qǐng)求，將姓名和年齡作為參數(shù)傳遞
xhr.send('name=' + name + '&age=' + age);
});

在上述代碼中，我們首先獲取了表單元素，并使用addEventListener方法監(jiān)聽(tīng)了表單的提交事件。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，會(huì)觸發(fā)該事件。然后我們使用XMLHttpRequest對(duì)象創(chuàng)建了一個(gè)AJAX請(qǐng)求，并設(shè)置了請(qǐng)求方法和URL。通過(guò)設(shè)置setRequestHeader方法，我們指定了請(qǐng)求頭中的Content-Type屬性為application/x-www-form-urlencoded，表示請(qǐng)求的數(shù)據(jù)以鍵值對(duì)的形式傳遞。在回調(diào)函數(shù)中，我們可以對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行處理。最后，我們調(diào)用send方法發(fā)送請(qǐng)求，并將姓名和年齡作為參數(shù)傳遞。

服務(wù)器端的處理邏輯可以根據(jù)具體需求而定。在這里，我們以PHP為例，創(chuàng)建了一個(gè)saveData.php文件，用于接收前臺(tái)傳遞過(guò)來(lái)的值，并將其存儲(chǔ)到數(shù)據(jù)庫(kù)中。

<?php
// 獲取前臺(tái)傳遞過(guò)來(lái)的姓名和年齡
$name = $_POST['name'];
$age = $_POST['age'];
// 連接數(shù)據(jù)庫(kù)
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
// 插入數(shù)據(jù)
$sql = "INSERT INTO users (name, age) VALUES ('$name', '$age')";
$conn->query($sql);
// 關(guān)閉數(shù)據(jù)庫(kù)連接
$conn->close();
?>

在上述PHP代碼中，我們首先通過(guò)$_POST全局變量獲取前臺(tái)傳遞過(guò)來(lái)的姓名和年齡。然后創(chuàng)建了一個(gè)mysqli對(duì)象，用于連接數(shù)據(jù)庫(kù)。接著，我們使用SQL語(yǔ)句將獲取到的值插入到名為users的表中。最后，關(guān)閉數(shù)據(jù)庫(kù)連接。

通過(guò)以上的代碼，我們實(shí)現(xiàn)了使用AJAX將前臺(tái)的值傳遞到數(shù)據(jù)庫(kù)的功能。用戶填寫(xiě)完表單后，點(diǎn)擊提交按鈕，無(wú)需頁(yè)面刷新，數(shù)據(jù)即可被傳遞到服務(wù)器，并存儲(chǔ)到數(shù)據(jù)庫(kù)中。這不僅提高了用戶的體驗(yàn)，還減輕了服務(wù)器的壓力，提高了頁(yè)面的響應(yīng)速度。