使用 FETCH 单击按钮提交表单并使用 PHPMailer 发送电子邮件

Question

我想通过 fetch API 向 index.php 发送一个按钮点击表单，并在其中验证表单。如果表单中没有错误，我想用 PHPMailer 向客户端发送一封电子邮件。由于某种原因，客户端没有收到电子邮件。 我已经搜索了几个小时的答案，但我无法解决问题。

这里是javascript代码：

 const form = document.querySelector("#myForm");
      form.addEventListener("submit", (e) => {
        e.preventDefault();
        const formData = new FormData(form);
        fetch("index.php", {
          method: 'post',
          body: formData
        }).then((resp) => resp.json())
        .then(function (text) {
          console.log(text); //Do something with the response, which is an array
          if(text !== undefined && text.length > 0) { //The array isn't empty
            //Show errors
            const formdiverror = document.querySelector(".col-100-form-error");
            const colform = document.querySelector(".col-100-form"); //showing error
            colform.style.display = "block";
            formdiverror.innerHTML = "";
            text.forEach(t => formdiverror.innerHTML += t + "</br>");
          } else {
            //array is empty, no errors
             const colform = document.querySelector(".col-100-form");
             if(colform !== null || colform !== undefined) colform.style.display = "none";
             alert("You succesfully bought the product!");
            //window.location.replace("index.html"); //if there was no error redirect to index.html
          }
        });
      })

php:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
require 'Exception.php';
require 'PHPMailer.php';
require 'SMTP.php';
require 'PHPMailerAutoload.php';
require "class.phpmailer.php";
require "class.smtp.php";


$errors = [];

if(isset($_POST["name"])) {
   
     /*I took out the validation to simplify the code*/
    if (!empty($errors)) {
        echo json_encode($errors);
    } else {
        echo json_encode([]);
        $mail = new PHPMailer();
        $mail->isSMTP();
        $mail->Host = 'smtp.gmail.com';
        $mail->SMTPAuth = true;
        $mail->Username = "mymail@gmail.com"; //paste one generated by Mailtrap
        $mail->Password = 'mypasswd'; 
        $mail->SMTPSecure = 'tls'; // secure transfer enabled REQUIRED for GMail
        $mail->Port = 587;
        $mail->addAddress("customer@gmail.com", 'First Last');
        $mail->addReplyTo('mymail@gmail.com', 'First Last');
        $mail->setFrom('mymail@gmail.com', 'John Doe');
        $mail->Subject = 'PHPMailer GMail SMTP test';
        $mail->isHTML(true);
        $mailContent = "<h1>Send HTML Email using SMTP in PHP</h1>
        <p>This is a test email I’m sending using SMTP mail server with PHPMailer.</p>";
         $mail->Body = $mailContent;
         $mail->send();
        //If I try this way it gives an errror: Unexpected token in JSON at position 
        /* if($mail->send()){
            echo ('Message has been sent');
        }else{
            echo ('Message could not be sent.');
            echo ('Mailer Error: ' . $mail->ErrorInfo);
        }*/
    }
} 
?>

我没有收到任何错误，所以我不知道问题出在哪里。 我已禁用双向验证，并允许访问不太安全的应用程序。

Answer 1

首先，您要导入 PHPMailer 的 both 版本 5 和 6！那不会很顺利； 6. 删除这些行和它们指向的文件；你不需要它们：

require 'PHPMailerAutoload.php';
require "class.phpmailer.php";
require "class.smtp.php";

如果您对如何导入库感到困惑，那么现在是了解composer 的好时机。

奇怪的是，当您注释掉显示错误所在的代码时，当出现错误时它不再显示...console.log(text); 行也应该显示您的浏览器看到的内容。

解决此问题的最佳方法是一次调试一件事。

首先确保您的表单实际上以应有的格式将数据传递给您的脚本——考虑到 JSON 错误（不是来自 PHPMailer），这似乎很可能是 不是 em> 的情况，这可能是你所有问题的根源。所以在你的脚本顶部附近添加这个：

var_dump($_REQUEST);

这会破坏您的 ajax 请求（因为输出不是 JSON），但您将能够在浏览器的 Web 检查器中看到原始响应。

确认格式正确并包含所有预期的表单数据后，删除var_dump 行并继续检查您是否正确访问了 JSON 中的属性。同样，您可能会发现最好在浏览器的检查器中显示此内容。一旦确定以正确的方式提取所需的所有数据位，就可以继续发送电子邮件了。

鉴于通过 SMTP 使用 gmail 的非常常见问题，最好使用固定值测试您的电子邮件代码，与您的 ajax 东西分开 - 没有其他东西就很难自行调试碍事。

现在您已经到了所有单独部分都可以工作的地步，将它们重新组合在一起并检查每个步骤。