在使用 Ajax 技術進行網頁開發時，我們常常需要實現局部刷新頁面的功能。其中一種常見的需求是在現有的頁面中添加一行新的信息，而不需要刷新整個頁面。本文將介紹如何使用 Ajax 實現局部添加一行信息，并通過實例進行說明。 首先，我們需要一個包含一些已有信息的頁面。假設我們有一個用于展示用戶留言的網頁，里面包含了一些已存在的留言，如下所示：

用戶留言：

<div id="message">
<div class="message-item">
<span class="user">User A：</span>
<span class="content">這是第一條留言。</span>
</div>
<div class="message-item">
<span class="user">User B：</span>
<span class="content">這是第二條留言。</span>
</div>
</div>

現在，我們希望在用戶輸入框中輸入新的留言，然后通過點擊“發布”按鈕將新的留言添加到已有的留言列表中。為了實現這個功能，我們首先需要準備一個用于接收并處理新留言的服務器端腳本，比如 PHP：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 獲取用戶輸入的留言內容
$content = $_POST['content'];
// 將新留言添加進數據庫或其他存儲方式
// 返回包含新留言的 HTML 代碼片段
$newMessage = '
<div class="message-item">
<span class="user">User C：</span>
<span class="content">' . $content . '</span>
</div>
';
echo $newMessage;
}
?>

接下來，我們使用 JavaScript 配合 Ajax 技術來實現局部添加一行信息的功能。我們可以通過以下步驟來完成： 1. 給發布按鈕綁定點擊事件，當用戶點擊按鈕時觸發。 2. 在事件處理程序中獲取用戶輸入的留言內容。 3. 發送 Ajax 請求到服務器，并將留言內容作為請求的參數傳遞給服務器端腳本。 4. 在 Ajax 的回調函數中，獲取服務器返回的包含新留言的 HTML 代碼片段。 5. 將新留言的 HTML 代碼片段添加到已有留言列表中。 下面是上述步驟的具體代碼實現：

<script>
window.addEventListener('load', function() {
// 給發布按鈕綁定點擊事件
document.getElementById('submit-button').addEventListener('click', function() {
// 獲取用戶輸入的留言內容
var content = document.getElementById('input-content').value;
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 設置請求方式和 URL
xhr.open('POST', 'server.php', true);
// 設置請求頭部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器返回的新留言 HTML 代碼片段
var newMessage = xhr.responseText;
// 將新留言添加到已有留言列表中
document.getElementById('message').insertAdjacentHTML('beforeend', newMessage);
}
};
// 發送 Ajax 請求
xhr.send('content=' + encodeURIComponent(content));
});
});
</script>

上述代碼中，我們通過 JavaScript 給發布按鈕綁定了一個點擊事件，當用戶點擊按鈕時，會執行對應的事件處理程序。事件處理程序中獲取用戶輸入的留言內容，并創建一個 XMLHttpRequest 對象。然后，我們通過xhr.open方法設置請求方式為 POST，URL 為服務器端腳本的路徑。接下來，我們設置請求頭部信息并通過xhr.send方法發送 Ajax 請求，并將留言內容作為請求參數傳遞給服務器端腳本。 在 Ajax 的回調函數中，當服務器返回了響應，并且狀態碼為 200 時，我們可以通過xhr.responseText屬性獲取服務器返回的新留言 HTML 代碼片段。然后，我們通過insertAdjacentHTML方法將新留言的 HTML 代碼片段添加到已有留言列表的末尾。 綜上，通過上述步驟和代碼實現，我們可以輕松地使用 Ajax 實現局部添加一行信息的功能。這為我們的網頁開發帶來了更好的用戶體驗和交互性。無需刷新整個頁面，即可實現快速添加新內容的功能。