< p >在現如今的互聯網時代，我們經常會使用網頁注冊、登錄等功能。為了確保用戶安全，一個常見的操作是發送一個驗證碼到用戶注冊時所提供的郵箱。本文將介紹如何使用AJAX與PHP技術實現郵箱驗證碼功能，并以舉例說明其中的步驟與細節。< /p >< p >首先，我們需要創建一個簡單的網頁表單，用戶需要在表單中提供一個有效的郵箱地址以便接收驗證碼。之后，我們使用AJAX技術在用戶填寫郵箱地址后動態發送請求到后臺，進而調用PHP代碼來處理請求。< /p >< pre >
// 創建表單
<form id="emailForm">
<input type="email" name="email" id="email" placeholder="請輸入郵箱地址" required>
<button type="submit" id="submitBtn">獲取驗證碼</button>
</form>< script >// 使用AJAX發送請求
const emailForm = document.querySelector("#emailForm");
emailForm.addEventListener('submit', function(e) {
e.preventDefault();
const emailInput = document.querySelector("#email");
const email = emailInput.value.trim();
if (email !== "") {
const xhr = new XMLHttpRequest();
xhr.open("POST", "send_email.php", true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
};
xhr.send("email=" + email);
}
});< /script >< /pre >< p >在上述代碼中，我們首先通過document.querySelector獲取到了表單和郵箱輸入框的元素并添加了事件監聽。當用戶點擊“獲取驗證碼”按鈕后，觸發表單的submit事件，我們將通過事件對象來阻止默認的提交行為。接下來，我們獲取用戶填寫的郵箱地址，并使用XMLHttpRequest對象發送一個POST請求到名為send_email.php的PHP文件中。同時，我們要設置正確的請求頭，以確保服務器能夠正確解析我們發送的數據。< /p >< p >接下來，我們需要打開我們的send_email.php文件，并編寫能夠接收并處理這個請求的PHP代碼。< /p >< pre ><?php
$emailTo = $_POST['email'];
$subject = "郵箱驗證碼";
$randomCode = rand(1000, 9999);
$message = "驗證碼：" . $randomCode;
$headers = "From: example@example.com" . "\r\n" .
"Reply-To: example@example.com" . "\r\n" .
"X-Mailer: PHP/" . phpversion();
if(mail($emailTo, $subject, $message, $headers)){
echo "驗證碼已發送成功！";
} else {
echo "發送郵件失敗，請稍后再試。";
}
?>< /pre >< p >在上述PHP代碼中，我們首先通過$_POST獲取到了發送請求時所提供的郵箱地址，然后我們使用rand函數生成了一個4位數的隨機驗證碼。接下來，我們構造了郵件的主題和消息內容，并設置了一個包含發件人和回復地址的header頭部。最后，我們使用mail函數將郵件發送出去，并根據發送結果返回相應的消息。< /p >< p >綜上所述，通過AJAX與PHP的結合，我們能夠輕松地實現郵箱驗證碼的發送功能。用戶填寫郵箱地址并點擊按鈕后，AJAX發送請求到后臺的PHP文件中，PHP代碼則負責生成驗證碼，并使用mail函數發送郵件。用戶最終能夠獲得驗證碼以進行后續的操作。< /p >