使用 JavaScript 防止表单重载并发送 POST 请求-php教程-PHP中文网

使用 JavaScript 防止表单重载并发送 POST 请求

霞舞

发布： 2025-07-19 17:02:01

原创

384人浏览过

使用 javascript 防止表单重载并发送 post 请求

本文旨在解决在使用 reCAPTCHA 的表单提交时，如何防止页面重载并同时发送 POST 请求的问题。通过利用 reCAPTCHA 提供的 JavaScript API 和 AJAX 技术，我们可以异步地验证 reCAPTCHA，并在成功验证后执行其他操作，从而提升用户体验。

实现原理

核心思路是：

阻止表单的默认提交行为，防止页面重载。
使用 reCAPTCHA 提供的 JavaScript API 获取 reCAPTCHA 的响应值。
使用 AJAX 将 reCAPTCHA 的响应值发送到服务器进行验证。
根据服务器返回的验证结果，执行相应的操作。

具体步骤

1. 引入 reCAPTCHA API

首先，需要在 HTML 页面中引入 reCAPTCHA API。确保在 URL 中包含 onload 和 render 参数，以便使用显式渲染方式。

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

登录后复制

2. 渲染 reCAPTCHA

使用 grecaptcha.render 函数渲染 reCAPTCHA。

立即学习“Java免费学习笔记（深入）”；

<script type="text/javascript">
  var verifyCallBack = function(response) {
    alert(response);
  };
  var widgetId;
  var onloadCallback = function() {
    widgetId = grecaptcha.render('recaptcha', {
      'sitekey' : 'your_site_key', // 替换为你的 site key
      'theme' : 'light'
    });
  }
</script>

<div id="recaptcha"></div>

登录后复制

请务必将 'your_site_key' 替换为你的 reCAPTCHA site key。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

3. 阻止表单提交并发送 AJAX 请求

使用 JavaScript 监听表单的提交事件，阻止默认行为，并使用 AJAX 发送 reCAPTCHA 响应到服务器。

$('form').submit(function(e) {
  e.preventDefault();
  var response = grecaptcha.getResponse(widgetId);
  $.ajax({
    url: 'validate_captcha.php', // 替换为你的验证脚本路径
    type: 'POST',
    data: {'g-recaptcha-response': response},
    success: function(data) {
      alert(data);
      if(data == 'success') {
        // 验证成功，执行其他操作，例如注册用户
        registerUser(name, email, password); // 示例函数，需要根据你的实际情况实现
      } else {
        // 验证失败，显示错误信息
        alert('reCAPTCHA 验证失败');
      }
    },
    error: function(error) {
      alert(error);
    }
  });
});

登录后复制

4. 服务器端验证

在服务器端（例如 validate_captcha.php），使用 secret key 验证 reCAPTCHA 响应。

<?php
if (isset($_POST['g-recaptcha-response'])) {
  function CheckCaptcha($userResponse) {
    $fields_string = '';
    $fields = array(
        'secret' => 'your_secret_key', // 替换为你的 secret key
        'response' => $userResponse
    );
    foreach($fields as $key=>$value)
    $fields_string .= $key . '=' . $value . '&';
    $fields_string = rtrim($fields_string, '&');

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
    curl_setopt($ch, CURLOPT_POST, count($fields));
    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);

    $res = curl_exec($ch);
    curl_close($ch);

    return json_decode($res, true);
  }
  $result = CheckCaptcha($_POST['g-recaptcha-response']);

  if ($result['success']) {
      echo 'success';

  } else {
     echo 'error';
  }
}
?>

登录后复制

请务必将 'your_secret_key' 替换为你的 reCAPTCHA secret key。