使用 Ajax 獲取頁面輸入的數據
Ajax（Asynchronous JavaScript and XML）即異步 JavaScript 和 XML，是一種用于創建交互式網站的技術。通過使用 Ajax，用戶可以在無需刷新整個頁面的情況下，與服務器進行數據交互。一種常見的應用場景就是獲取頁面輸入的數據并進行處理。本文將通過舉例說明，介紹如何使用 Ajax 獲取頁面輸入的數據并進行相應操作。
假設我們正在開發一個網站，其中有一個頁面上有一個文本輸入框和一個按鈕。用戶在文本輸入框中輸入一段文字，然后點擊按鈕，在頁面上顯示用戶輸入的文字。我們可以使用 Ajax 技術來實現這個功能。
首先，我們需要在頁面上添加一個文本輸入框和一個按鈕，并為按鈕添加一個點擊事件。當用戶點擊按鈕時，我們將獲取文本輸入框中的內容，并通過 Ajax 將內容發送給服務器。
下面是相應的 HTML 代碼：

<input type="text" id="inputText" />
<button id="submitButton">提交</button>
<div id="output"></div>

然后，我們需要編寫 JavaScript 代碼來處理點擊事件，并使用 Ajax 獲取頁面輸入的數據。我們可以使用 jQuery 提供的 Ajax 方法來簡化代碼。下面是相應的 JavaScript 代碼：

$('#submitButton').click(function() {
var inputText = $('#inputText').val();
$.ajax({
url: 'process_data.php', // 處理數據的服務器端腳本
method: 'POST', // 使用 POST 方法發送數據
data: {text: inputText}, // 發送的數據
success: function(response) {
$('#output').text(response); // 在頁面上顯示服務器返回的響應
}
});
});

在上述代碼中，我們首先獲取文本輸入框中的內容，并將其保存在變量inputText中。然后，我們使用 Ajax 發送數據到服務器端腳本process_data.php。通過指定 URL、請求方法、發送的數據，以及成功響應的回調函數，我們可以完成發送數據并處理服務器的響應。
在服務器端腳本process_data.php，我們可以獲取通過 Ajax 發送的數據，并進行相應的處理。例如，我們可以對用戶輸入的文字進行一些處理，然后將處理后的結果作為響應返回給客戶端。

<?php
$text = $_POST['text']; // 獲取通過 Ajax 發送的數據
$processedText = strtoupper($text); // 處理用戶輸入的文字
echo $processedText; // 返回處理后的結果
?>

在上述代碼中，我們使用$_POST變量獲取通過 Ajax 發送的數據，并將其保存在變量$text中。然后，我們對$text進行一些處理，這里我們將輸入的文字全部轉換為大寫字母，并將處理后的結果保存在變量$processedText中。最后，我們使用echo將處理后的結果作為響應返回給客戶端。
當用戶在文本輸入框中輸入一段文字并點擊按鈕后，頁面上的div容器內將顯示用戶輸入的文字的大寫形式。
以上就是使用 Ajax 獲取頁面輸入的數據并進行相應操作的方法。通過使用 Ajax，我們可以實現與服務器的異步通信，從而提升用戶體驗和頁面的交互性。希望這篇文章對您有所幫助！