使用 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 内容分开 - 如果没有其他内容妨碍，它本身就很难调试。现在您已经到了所有各个部分都可以工作的地步，将它们重新组合在一起并检查每个步骤。