Ajax邮件表单提交按钮卡在处理状态 如何实现提交后页面跳转

核心问题定位 #

• 前端AJAX请求指定了dataType:"json"，要求返回JSON格式数据，但PHP后端所有返回内容都是纯文本，jQuery解析JSON失败后直接进入error回调，不会执行success内修改按钮状态的逻辑，因此按钮一直停留在"sending..."状态
• PHP代码存在语法结构错误，reCAPTCHA校验请求的URL存在多余空格，会导致校验逻辑异常，同时邮件内容拼接存在变量覆盖的小问题

前端代码调整 #

修改submitemail函数内的AJAX逻辑，补充异常场景下的按钮重置，新增提交成功后的跳转逻辑：

function submitemail() {
  var _submit = $("#submit");
  _submit.val("Sending . . .");
  _submit.attr("disabled", "disabled");

  var postData = $("#contact_form").serializeArray();
  var formURL = $("#contact_form").attr("action");
  $.ajax({
    url: formURL,
    type: "POST",
    dataType:"json",
    data: postData,
    success: function (data, textStatus, jqXHR) {
      var status = data.status
      if (status == "success") {
        _submit.val("Submitted Successfully");
        // 替换为你要跳转的站内页面地址即可
        window.location.href = "/你的目标跳转页面路径";
      } else {
        _submit.val("Error with server");
        _submit.removeAttr("disabled");
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.log("Our email server isn't responding");
      // 异常场景重置按钮状态
      _submit.val("Submit");
      _submit.removeAttr("disabled");
    }
  });
}

PHP代码调整 #

修复语法错误，统一返回JSON格式数据，修正reCAPTCHA请求URL，修复邮件内容变量覆盖问题：

<?php
// 指定返回JSON格式
header('Content-Type: application/json');

// 仅处理POST请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取表单字段并处理
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $company = $_POST["company"] ?? '';
    $email = filter_var(trim($_POST["from"]), FILTER_SANITIZE_EMAIL);
    $message = trim($_POST["message"]);
    $captcha = $_POST['g-recaptcha-response'] ?? '';

    // 校验验证码
    if(!$captcha){
        echo json_encode(['status' => 'error', 'msg' => 'Please check the the captcha form.']);
        exit;
    }
    $secretKey = "XXXXX";
    $ip = $_SERVER['REMOTE_ADDR'];
    // 去掉URL内的多余空格
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
    $responseKeys = json_decode($response,true);
    if(intval($responseKeys["success"]) !== 1) {
        echo json_encode(['status' => 'error', 'msg' => 'Please check Recaptcha']);
        exit;
    }

    // 校验表单字段
    if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        http_response_code(400);
        echo json_encode(['status' => 'error', 'msg' => 'Oops! There was a problem with your submission. Please complete the form and try again.']);
        exit;
    }

    // 邮件配置
    $recipient = "email@gmail.com";
    $subject = "Subject from $email";
    $email_content = "Name: $name\n";
    $email_content .= "Company: $company\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";
    $email_headers = "From: $email <$email>";

    // 发送邮件
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        http_response_code(200);
        echo json_encode(['status' => 'success', 'msg' => 'Thank You! Your message has been sent.']);
    } else {
        http_response_code(500);
        echo json_encode(['status' => 'error', 'msg' => 'Oops! Something went wrong and we couldn\'t send your message.']);
    }
}
?>

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