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

Question

我想在点击按钮时发送一个表单并获取 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

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

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

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

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

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

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

var_dump($_REQUEST);

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

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

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

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

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

Submit form on button click with FETCH and send an email with PHPMailer

javascript

php

phpmailer

fetch