使用 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          }        });      })

Answer 1

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

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

如果您对如何导入库感到困惑，那么现在是学习Composer 的好时机。

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

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

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

var_dump($_REQUEST);

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

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

考虑到通过 SMTP 使用 gmail 的常见问题，最好使用固定值测试您的电子邮件代码，与您的 ajax 内容分开 - 如果没有其他内容妨碍，它本身就很难调试。

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