允许表单发送 POST 请求但阻止页面重新加载 - Javascript

Question

我正在处理一个带有集成 v2 reCAPTCHA 的注册表单，但我遇到了一个问题，即在提交包含 reCAPTCHA 的表单时，它正在重新加载页面。 我有一个 php 函数来验证 reCAPTCHA：

 if (isset($_POST['g-recaptcha-response'])) { function CheckCaptcha($userResponse) { $fields_string = ''; $fields = array( 'secret' =>' 6LcGWeEcAAAAAMALbpP873Pt40Wgwn6e0SuVn7EV', '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'; } }

当表单提交时，它会向它所在的页面提供一个 POST 变量g-recaptcha-response ，因为表单没有action属性

所以，我需要获取 POST 请求，但我不能让页面重新加载，因为这会删除页面上的其他数据。 我尝试使用event.preventDefault(); 提交表单时，但这也阻止了表单提交 POST 变量。

我不知道如何通过 javascript 获取 POST 变量，因为 reCAPTCHA 实际上不是输入。

但是如果有一种方法可以通过 javascript 获取 reCAPTCHA 的值，那么我可以使用 ajax 将 POST 请求发送到该函数。

Answer 1

如果在脚本 url 中包含查询字符串：

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

那么你可以使用grecaptcha.getResponse因为它在谷歌 reCAPTCHA 文档中说：
https://developers.google.com/recaptcha/docs/display

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"async defer></script>
<script type="text/javascript">
  var verifyCallBack = function(response) {
    alert(response);
  };
  var widgetId;
  var onloadCallback = function() {
    widgetId = grecaptcha.render('recaptcha', {
      'sitekey' : 's',
      'theme' : 'light'
    });
  }
</script>

<form>
  <div id="recaptcha"></div>
  <input type="submit" name="submit" value="submit">
</form>

$('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);
    },
    error: function(error) {
      alert(error);
    }
  });
});

然后在validate_captcha.php ：

<?php
if (isset($_POST['g-recaptcha-response'])) {
  function CheckCaptcha($userResponse) {
    $fields_string = '';
    $fields = array(
        'secret' => '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';
  }
}
?>

因此，现在在您的 javascript 中，您可以在 if 语句中使用success:function(data)中的data变量：

if(data == 'success') {
  registerUser(name, email, password); // not a real function, just an example
}