我想使用AJAX/JavaScript构建联系人表单验证，以确保表单提交后页面不会重新加载。电子邮件格式是在PHP脚本中处理的。
在包括AJAX验证之前，电子邮件格式和发送都很好，但现在我只收到一封空电子邮件。
为了将表单输入正确发送到电子邮件，我需要在AJAX代码中更改什么？
提前感谢！
这是我的AJAX代码：
const contactForm = document.addEventListener('DOMContentLoaded', function() {
document.addEventListener("submit", function(e) {
e.preventDefault();
const formData = document.getElementById('contact-form');
let data = new FormData(formData);
const xhr = new XMLHttpRequest();
xhr.open('POST', "contactform.php", true);
xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('contact-form').reset();
document.querySelector('.response').innerHTML = '<p class="alert alert-success">Bedankt voor uw bericht. Wij nemen zo snel mogelijk contact met u op.</p>';
} else {
document.querySelector('.response').innerHTML = '<p class="alert alert-danger">Er is iets misgegaan.</p>';
}
};
xhr.send(data);
})
})
PHP代码：
<?php
$assignmentchoice = $_POST['assignmentchoice'];
$projectchoice = $_POST['projectchoice'];
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$phonenumber = $_POST['phonenumber'];
$address = $_POST['address'];
$zipcode = $_POST['zipcode'];
$message = $_POST['message'];
$email_body = "";
if(isset($_POST['assignmentchoice'])) {
$assignmentchoice = filter_var($_POST['assignmentchoice'], FILTER_SANITIZE_STRING);
$email_body .= "Opdracht: ".$assignmentchoice."rn";
}
if(isset($_POST['projectchoice'])) {
$projectchoice = filter_var($_POST['projectchoice'], FILTER_SANITIZE_STRING);
$email_body .= "Project: ".$projectchoice."rn";
}
if(isset($_POST['name'])) {
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email_body .= "Voornaam: ".$name."rn";
}
if(isset($_POST['lastname'])) {
$lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
$email_body .= "Achternaam: ".$lastname."rn";
}
if(isset($_POST['email'])) {
$visitor_email = str_replace(array("r", "n", "%0a", "%0d"), '', $_POST['email']);
$visitor_email = filter_var($email, FILTER_VALIDATE_EMAIL);
$email_body .= "Email adres: ".$email."rn";
}
if(isset($_POST['phonenumber'])) {
$phonenumber = filter_var($_POST['phonenumber'], FILTER_SANITIZE_NUMBER_INT);
$email_body .= "Telefoonnummer: ".$phonenumber."rn";
}
if(isset($_POST['address'])) {
$address = filter_var($_POST['address'], FILTER_SANITIZE_STRING);
$email_body .= "Adres locatie: ".$address."rn";
}
if(isset($_POST['zipcode'])) {
$zipcode = filter_var($_POST['zipcode'], FILTER_SANITIZE_STRING);
$email_body .= "Postcode: ".$zipcode."rn";
}
if(isset($_POST['message'])) {
$message = htmlspecialchars($_POST['message']);
$email_body .= "Bericht: ".$message."rn";
}
$to = "example@email.com";
$subject = "U heeft een nieuw bericht!";
$message = $email_body;
$header = "From:" . $from . "rn";
$header .= 'MIME-Version: 1.0' . "rn";
$header .= 'Content-type: text/html; charset=utf-8' . "rn";
mail($to, $subject, $message);
?>
不要设置内容类型请求头，首先application/x-www-form-urlencoded不正确。FormData对象使用多部分/表单数据内容类型。其次，您无法手动正确设置此内容类型，如果您将其留空，浏览器将为您设置正确的边界。