在JS中调用PHP脚本实现表单提交功能的问题咨询

你的整体实现路径是完全正确的，核心逻辑符合前端异步提交表单、后端处理邮件发送的常规方案，下面拆解细节和问题点：

一、核心逻辑合理性 #

• 前端通过event.preventDefault()阻止表单默认跳转，采用AJAX异步提交，避免页面刷新，提升用户体验
• 使用FormData自动收集所有带name属性的表单字段（包括reCAPTCHA响应值），无需手动拼接参数，减少出错概率
• 后端先判断提交触发标识（$_REQUEST['submit']），再验证reCAPTCHA合法性，通过后执行邮件发送，流程清晰严谨

二、最初控制台输出为空的可能原因 #

• 自定义验证未通过：如果validateFields()函数返回false，代码不会进入AJAX发送分支，自然无控制台输出
• reCAPTCHA未初始化：若页面加载时reCAPTCHA脚本未完成加载，调用grecaptcha.getResponse()会报错，导致代码中断
• 后端逻辑未触发：比如$_REQUEST['submit']判断失败——虽然提交按钮带name="submit"，但如果按钮状态异常，FormData可能未携带该字段，导致后端代码不执行

三、返回true后的注意事项 #

1. mail()函数的局限性：mail()返回true仅代表PHP成功将邮件交给服务器邮件发送程序，不代表邮件已送达收件人邮箱。可能因服务器未配置邮件服务、收件人邮箱拦截垃圾邮件等原因收不到邮件
2. 替换reCAPTCHA密钥：代码中$siteKey和$secretKey为占位符，必须替换为Google reCAPTCHA后台申请的真实密钥，否则验证码验证会失败
3. 前端错误提示优化：当前仅通过按钮变灰反馈验证失败，应补充明确的文字提示（如reCAPTCHA未勾选时提示“请完成验证码验证”）
4. PHP调试优化：可在PHP脚本开头添加error_reporting(E_ALL); ini_set('display_errors', 1);，方便排查PHP运行时错误
5. 表单兜底验证：给表单字段添加required属性做原生兜底验证，同时确保validateFields()内的自定义验证逻辑正确（如姓名长度≥2、邮箱格式合规）

你的代码整理（还原为可直接使用的格式） #

前端JS代码

document.getElementById('form')
    .addEventListener('submit', function (event) {
        event.preventDefault();

        let response = grecaptcha.getResponse();
        if (validateFields() && !response.length == 0) {
            console.log('got here');
            var data = new FormData(document.getElementById('form'));
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'form-to-email.php');
            xhr.onload = function () {
                console.log(this.response);
            };
            xhr.send(data);
            return false;
        }
        document.getElementById('button').style.cursor = 'not-allowed';
});

PHP脚本（form-to-email.php）

<?php
// Google reCAPTCHA API key配置
$siteKey     = '你的Site Key';
$secretKey     = '你的Secret Key';

if (isset($_REQUEST['submit'])) {
  $to = "example@mail.com"; // 你的收件邮箱
  $from = $_POST['email']; // 发件人邮箱
  $name = $_POST['name'];
  $subject = "Form submission";
  $message = $name . " wrote the following:" . "\n\n" . $_POST['message'];

  if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
    // 验证reCAPTCHA响应
    $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secretKey . '&response=' . $_POST['g-recaptcha-response']);

    // 解析JSON数据
    $responseData = json_decode($verifyResponse);

    // 如果reCAPTCHA验证通过
    if ($responseData->success) {
      $headers = "From:" . $name . '<' . $from . '>' . PHP_EOL;
      $headers .= "Reply-To:" . $to . PHP_EOL;
      $headers .= "MIME-Version 1.0" . PHP_EOL;
      $headers .= "Content-Type: text/html; charset=UTF-8" . PHP_EOL;
      $headers .= "X-Mailer: PHP/" . phpversion();
      $status = mail($to, $subject, $message, $headers);

      echo "<pre>";
      var_dump($status);
      if ($status) {
        echo '<p>Your message has been sent. We will get in touch with you soon. Thank you!</p>';
      } else {
        echo '<p>Something went wrong. Please try again!</p>';
      }
    } else {
      echo 'error';
    }
  } else {
    echo 'Please check on the reCAPTCHA box.';
  }
}
?>

index.php表单代码

<?php include_once 'form-to-email.php';?>
<form id="form" method="post" action="">
    <div class="input-group">
        <input type="text" id="name" name="name" class="input-demo" placeholder="Your Name">
        <span id="invalid-name">
            Please enter at least 2 chars
        </span>
    </div>
    <div class="input-group">
        <input id="email" type="email" name="email" class="input-demo" placeholder="Email Address">
        <span id="invalid-email">
            Please enter valid email
        </span>
    </div>
    <div class="input-group">
        <textarea id="message" name="message" placeholder="Message">
        </textarea>
        <span id="invalid-message">
            Please write something for us
        </span>
    </div>
    <div class="g-recaptcha" data-sitekey="<?php echo $siteKey; ?>">
    </div>
    <input type="submit" name="submit" id="button" class="demo" value="Book a Demo">
</form>

内容的提问来源于stack exchange，提问作者Kael