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

Question

我正在制作带有集成 v2 reCAPTCHA 的注册表单，并且遇到了这样的问题:在提交包含 reCAPTCHA 的表单时，它正在重新加载页面。我有一个 php 函数来验证 reCAPTCHA:

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';
  }
}

当表单提交时，它会向其所在的页面提供一个 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，如 Google 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
}