我正在尝试创建一个联系人表单，该表单1(向收件人电子邮件发送格式化消息，2(在用户提交表单后在同一页面上显示成功/错误弹出消息。
我曾尝试使用JQueryAJAX表单验证，但这导致我的网站表现不佳(它已经在Bootstrap CDN上运行(。这就是我在AJAX请求中使用普通JavaScript的原因。
目前，当我想访问contactform.html页面时，我会立即看到一个白色屏幕，其中只有一个带有默认PHP消息和状态的对象。是什么原因造成的？
AJAX请求
const contactForm = document.addEventListener('DOMContentLoaded', function() {
document.getElementById('contact-form').submit(function(e) {
e.preventDefault();
const xhr = new XMLHttpRequest();
const url = 'contactform3.php';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let jsonData = JSON.parse(xhr.response);
console.log(jsonData);
document.getElementById('contact-form').reset();
document.querySelector('.response').innerHTML = 'Bedankt voor uw bericht. Wij nemen zo snel mogelijk contact met u op.';
} else {
document.querySelector('.response').innerHTML = 'Er is iets misgegaan.';
}
};
})
})
PHP
<?php
// Recipient Email
$toEmail = 'info@example.com';
$status = 0;
$statusMsg = 'Er is iets misgegaan.';
if(isset($_POST['contact_submit'])){
// Get the submitted data
$assignmentchoice = $_POST['assignmentchoice'];
$projectchoice = $_POST['projectchoice'];
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$address = $_POST['address'];
$zip = $_POST['zip'];
$message = $_POST['message'];
if(!empty($assignmentchoice) && !empty($projectchoice) && !empty($name) && !empty($lastname) && !empty($email) && !empty($message)) {
if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$statusMsg = 'Vul een geldig e-mail adres in.';
} else {
$emailSubject = 'U heeft een nieuw bericht van'.$name;
$htmlContent = '<h2>Je hebt een nieuw bericht</h2>
<h4>Opdracht:</h4><p>'.$assignmentchoice.'</p>
<h4>Project:</h4><p>'.$projectchoice.'</p>
<h4>Naam:</h4><p>'.$name.'</p>
<h4>Achternaam:</h4><p>'.$lastname.'</p>
<h4>Email adres:</h4><p>'.$email.'</p>
<h4>Telefoonnummer:</h4><p>'.$tel.'</p>
<h4>Adres locatie:</h4><p>'.$address.'</p>
<h4>Postcode locatie:</h4><p>'.$zip.'</p>
<h4>Bericht:</h4><p>'.$message.'</p>';
$headers = "MIME-Version: 1.0" . "rn";
$headers .= "Content-type:text/html;charset=UTF-8" . "rn";
$headers .= 'From: '.$name.'<'.$email.'>'. "rn";
$sendEmail = mail($toEmail, $emailSubject, $htmlContent, $headers);
if($sendEmail) {
$status = 1;
$statusMsg = 'Bedankt voor uw bericht. Wij nemen zo snel mogelijk contact met u op.';
} else {
$statusMsg = 'Er is iets misgegaan.';
}
}
} else {
$statusMsg = 'Vul alstublieft alle velden in.';
}
}
$response = array(
'status' => $status,
'message' => $statusMsg
);
echo json_encode($response);
?>
是否检查了控制台的错误？您所描述的症状是JSON数据直接显示在浏览器中，这表明表单是正常返回的，而不是使用AJAX。这反过来表明您的Javascript没有正确运行。
尝试更改
document.getElementById('contact-form').submit(function(e) {
至
document.getElementById('contact-form').addEventListener("submit", function(e) {
submit函数是jQuery独有的功能。
MDN文档显示了如何使用"；提交"；本地JS中的事件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
之后，您需要进一步修改代码，因为据我所知，您实际上并没有使用xhr.send((提交AJAX请求，也没有从HTML表单中提取任何数据来填充它。请参阅XMLHttpRequest以发布HTML表单和使用XMLHttpRequest发送Post数据，以了解需要做什么的示例。
"目前，当我想访问contactform.html页面时，我会立即看到一个白色屏幕，其中只有一个带有默认PHP消息和状态的对象"-你的js代码是直接提交表单，而不是"倾听"；提交事件。更改此行
document.getElementById('contact-form').submit(function(e) { ....
至
document.addEventListener("submit", function(e){ ....