假設(shè)我們有一個(gè)網(wǎng)站的聯(lián)系頁面，用戶可以輸入姓名、郵箱和留言后點(diǎn)擊提交按鈕來發(fā)送郵件給網(wǎng)站管理員。傳統(tǒng)的表單提交方式會(huì)導(dǎo)致整個(gè)頁面的刷新，用戶體驗(yàn)不佳。而使用AJAX提交表單，則可以在不刷新頁面的情況下發(fā)送郵件，并反饋給用戶操作成功或失敗的信息。比如當(dāng)用戶提交后，我們可以顯示一個(gè)"正在發(fā)送中..."的提示，然后在郵件成功發(fā)送后的回調(diào)函數(shù)里，顯示"發(fā)送成功"的提醒信息。
首先，我們需要編寫一個(gè)用于發(fā)送郵件的服務(wù)器端腳本。考慮到安全性和可移植性，我們選擇使用PHP來處理表單數(shù)據(jù)并發(fā)送郵件。下面是一個(gè)簡(jiǎn)單的PHP腳本示例：
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "admin@example.com";
$subject = "New Message From Website Contact";
$body = "Name: $name\nEmail: $email\nMessage: $message";
if (mail($to, $subject, $body)) {
echo "success";
} else {
echo "error";
}
}
?>上述PHP腳本接受POST請(qǐng)求并從POST參數(shù)中取得姓名、郵箱和留言信息。然后，它使用mail函數(shù)將郵件發(fā)送給網(wǎng)站管理員的郵箱。如果郵件發(fā)送成功，該腳本輸出"success"作為響應(yīng)；否則，輸出"error"。
接下來，在前端頁面中，我們需要使用JavaScript編寫AJAX請(qǐng)求，并在表單提交時(shí)調(diào)用該請(qǐng)求。下面是一個(gè)使用jQuery庫(kù)來實(shí)現(xiàn)AJAX提交表單的示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="contactForm">
<input type="text" name="name" placeholder="姓名" required>
<input type="email" name="email" placeholder="郵箱" required>
<textarea name="message" placeholder="留言" required></textarea>
<button type="submit">提交</button>
</form>
<script>
$(function() {
$("#contactForm").submit(function(e) {
e.preventDefault(); // 阻止表單的默認(rèn)提交行為
var form = $(this);
var url = form.attr("action");
var formData = form.serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
success: function(response) {
if (response === "success") {
alert("發(fā)送成功");
} else {
alert("發(fā)送失敗，請(qǐng)稍后再試");
}
},
error: function() {
alert("發(fā)送失敗，請(qǐng)稍后再試");
}
});
});
});
</script>
</body>
</html>在上述示例中，我們首先引入了jQuery庫(kù)。然后，我們?cè)诒韱螛?biāo)簽上添加了一個(gè)id屬性，以便在JavaScript中使用。接著，在JavaScript部分，我們使用了jQuery的DOMContentLoaded事件，確保在頁面加載完成后執(zhí)行我們的JavaScript代碼。當(dāng)表單提交時(shí)，我們通過preventDefault()方法阻止了表單的默認(rèn)提交行為，并使用serialize()方法將表單數(shù)據(jù)序列化為字符串。然后，我們使用$.ajax()方法發(fā)送一個(gè)POST請(qǐng)求給服務(wù)器端腳本，并在成功或失敗時(shí)顯示相應(yīng)的提示。
通過以上的例子，我們可以看到如何使用AJAX提交表單并發(fā)送郵件提醒。這樣的實(shí)現(xiàn)可以減少頁面的刷新次數(shù)，提高用戶的交互體驗(yàn)。另外，你也可以根據(jù)實(shí)際需求，對(duì)以上代碼進(jìn)行相應(yīng)的修改和調(diào)整，以滿足不同的業(yè)務(wù)需求。