为什么 AJAX 会导致我的表单提交为空？

Question

我想使用 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."\r\n";
    }

    if(isset($_POST['projectchoice'])) {
        $projectchoice = filter_var($_POST['projectchoice'], FILTER_SANITIZE_STRING);
        $email_body .= "Project: ".$projectchoice."\r\n";
    }

    if(isset($_POST['name'])) {
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
        $email_body .= "Voornaam: ".$name."\r\n";
    }

    if(isset($_POST['lastname'])) {
        $lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
        $email_body .= "Achternaam: ".$lastname."\r\n";
    }

    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."\r\n";
    }
      
    if(isset($_POST['phonenumber'])) {
        $phonenumber = filter_var($_POST['phonenumber'], FILTER_SANITIZE_NUMBER_INT);
        $email_body .= "Telefoonnummer: ".$phonenumber."\r\n";
    }
      
    if(isset($_POST['address'])) {
        $address = filter_var($_POST['address'], FILTER_SANITIZE_STRING);
        $email_body .= "Adres locatie: ".$address."\r\n";
    }

    if(isset($_POST['zipcode'])) {
        $zipcode = filter_var($_POST['zipcode'], FILTER_SANITIZE_STRING);
        $email_body .= "Postcode: ".$zipcode."\r\n";
    }
      
    if(isset($_POST['message'])) {
        $message = htmlspecialchars($_POST['message']);
        $email_body .= "Bericht: ".$message."\r\n";
    }

    $to = "example@email.com";
    $subject = "U heeft een nieuw bericht!";
    $message = $email_body;

    $header = "From:" . $from . "\r\n";
    $header .= 'MIME-Version: 1.0' . "\r\n";
    $header .= 'Content-type: text/html; charset=utf-8' . "\r\n";

    mail($to, $subject, $message);

?>

Answer 1

不要设置内容类型请求头，首先application/x-www-form-urlencoded不正确。 FormData 对象使用 multipart/form-data 内容类型。其次，您无法手动正确设置此内容类型，如果您将其留空，浏览器将为您设置正确的边界。