允許表單發送POST請求但阻止頁面重新加載-Javascript

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

當表單提交時，它會為g-recaptcha-response它所在的頁面提供一個 POST 變數，因為action表單沒有屬性

所以，我需要獲取 POST 請求，但我不能讓頁面重新加載，因為這會洗掉頁面上的其他資料。我嘗試event.preventDefault();在提交表單時使用，但這也阻止了表單提交 POST 變數。

我不知道如何通過 javascript 獲取 POST 變數，因為 reCAPTCHA 實際上不是輸入。

但是如果有一種方法可以通過 javascript 獲取 reCAPTCHA 的值，那么我可以使用 ajax 將 POST 請求發送到該函式。

uj5u.com熱心網友回復：

如果在腳本 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 onl oadCallback = 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 陳述句中使用data變數success:function(data)：

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

標籤：javascript php html 查询 重新验证

上一篇：使用逗號將數字從0影片化到值-值從var中提取

下一篇：應用于串列的jquery選擇器“:checked”的簡寫