PHPmailer 和 vanilla JavaScript AJAX 表单提示

Question

所以，我需要一个联系表单，它可以发送带有 "success" 提示的电子邮件，提示出现在我的表单中，而无需重新加载。我发现 PHPmailer 可以帮助将邮件发送到收件箱而不是垃圾邮件（仅此一项就可以正常工作，电子邮件直接发送到收件箱）。然后我添加 JS 验证，然后添加 AJAX，然后添加处理 JSON 响应的 PHP。

点击"send"时出现"success"提示（好！）但问题是没有邮件sent/received。没有 AJAX 的代码在我的本地和网络主机上都可以正常工作。我如何优化它以便出现成功提示并发送电子邮件（理想情况下是收件箱）？

没有 jQuery 或任何额外的插件。

提前致谢。

HTML:

<div class="contact-form">
    <form action="mail.php" method="POST" onsubmit="return doRegister()">
        <input id="mail-name" type="text" name="name" placeholder="Your Name">
        <span id="name-alert"></span>
        <input id="mail-email" type="text" name="email" placeholder="Your Email">
        <span id="email-alert"></span>
        <input id="mail-subject" type="text" name="subject" placeholder="Your Subject">
        <span id="subject-alert"></span>
        <textarea id="mail-message" name="message" placeholder="Your Message"></textarea>
        <span id="message-alert"></span>
        <input type="submit" value="Send">
        <input type="reset" value="Clear">
        <span class="contact__form--alert-success" id="success-alert"></span>
    </form>
</div>

JS:

function doRegister() {
  let checks = {
    name : document.getElementById("mail-name"),
    email : document.getElementById("mail-email"),
    subject : document.getElementById("mail-subject"),
    message : document.getElementById("mail-message")
  },
error = "";
  if (checks.name.value=="") {
    error += document.getElementById("name-alert").innerHTML+='<p>A name is required!</p>';
  }
  if (checks.subject.value=="") {
    error += document.getElementById("subject-alert").innerHTML+='<p>A subject is required!</p>';
  }
  if (checks.message.value=="") {
    error += document.getElementById("message-alert").innerHTML+='<p>A message is required!</p>';
  }
  let pattern = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (!pattern.test(checks.email.value.toLowerCase())) {
    error += document.getElementById("email-alert").innerHTML+='<p>A valid email is required!</p>';
  }

// Ajax
if (error!="") {
    error="";
} else {
let data = new FormData();
for (let k in checks) {
  data.append(k, checks[k].value);
}
let xhr = new XMLHttpRequest();
xhr.open('POST', "mail.php", true);
xhr.onload = function(){
        let res = JSON.parse(this.response);
        // SUCCESS!
  if (res.status) {
            document.getElementById("success-alert").innerHTML+='<p>Success!</p>';
  } else {
    // ERROR!
    error = "";
    for (let e of res['error']) {
      error += e + "\n";
    }
    alert(error);
  }
};
// SEND
xhr.send(data);
 }
 return false;
}

PHP:

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
$error = [];
$msg = '';
if ( array_key_exists( 'email', $_POST ) ) {
  date_default_timezone_set( 'Etc/UTC' );
  require 'mail/vendor/autoload.php';
  // Call super globals from the contact form names
  $email                        = $_POST['email'];
  $name                         = $_POST['name'];
  $subject          = $_POST['subject'];
  $message          = $_POST['message'];
  $mail             = new PHPMailer;
  $mail->isSMTP();
  $mail->Host       = 'mail.host.com';
  $mail->SMTPAuth   = true;
  $mail->Username   = 'name@host.com';
  $mail->Password   = 'password1';
  $mail->SMTPSecure = 'ssl';
  $mail->Port       = 465;
  $mail->setFrom( 'name@host.com', 'New Message' );
  $mail->addAddress( 'somemail@mail.com' );
  if ($mail->addReplyTo($email, $name)) {
    $mail->Subject = $subject;
    $mail->isHTML(false);
    $mail->Body = <<<EOT
Email: {$email}
Name: {$name}
Message: {$message}
EOT;
  }

// Check inputs
if ($name=="") {
    $error[] = "A name is required.";
}
if ($subject=="") {
    $error[] = "A subject is required.";
}
if ($message=="") {
    $error[] = "A message is required.";
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $error[] = "A valid email is required.";
}

// JSON encode with a response
echo json_encode([
"status" => count($error)==0 ? 1 : 0,
"error" => $error
]);
 }

解法： "send()" 功能缺失

if(empty($error)){
  if(!$mail->send()){
    $error[] = 'There was an error sending the mail. Please try again!';
  }
}

Answer 1

你的PHP脚本没有发送邮件，因为没有调用send()函数，所以在验证之后，你应该添加如下内容：

if(empty($error)){
    if(!$mail->send()){
        $error[] = 'There was an error sending the mail. Please try again!';
    }
}

echo json_encode([
"status" => count($error)==0 ? 1 : 0,
"error" => $error
]);

通过这种方式发送邮件，如果出现问题（send() returns false），则会将错误添加到您的错误数组中。

PHPmailer 和 vanilla JavaScript AJAX 表单提示

PHPmailer and vanilla JavaScript AJAX form prompt

javascript

php

ajax

phpmailer