使用AJAX进行g-recaptcha-response

Question

我有一个联系表单,它将带有ajax请求的信息发送到php脚本.现在我想实现谷歌的"我不是一个机器人"recaptcha.

问题是,我不知道如何使用ajax传输g-recaptcha-response.如何验证它并将结果发送到send_contactrequest_process.php？

<div class="kontakt-container">
  <form class="kontakt-form" id="kontakt-form" method="post">
    <input type="text" name="firstname" id="contact-form-firstname" placeholder="Vorname (erforderlich)" class="kontakt-form-input" minlength="2" required="required" data-msg="Du musst dieses Feld ausfüllen">
    <input type="text" name="lastname" id="contact-form-lastname" placeholder="Nachname (erforderlich)" class="kontakt-form-input" minlength="2" required="required" data-msg="Du musst dieses Feld ausfüllen">
    <input type="tel" name="telephone" id="contact-form-telephone" placeholder="Telefonnummer" class="kontakt-form-input">
    <input type="email" name="email" id="contact-form-email" placeholder="E-Mail (erforderlich)" class="kontakt-form-input" minlength="10" required="required" data-msg="Diese Email-Adresse ist ungültig">
    <textarea class="kontakt-form-message" id="contact-form-message" required="required" data-msg="Was möchtest du uns mitteilen?"></textarea>
    <div class="g-recaptcha" data-sitekey="MY KEY"></div>
    <div class="kontakt-form-submit" id="kontakt-form-submit">senden</div>
  </form>
  <p class="kontakt-form-success-message">Vielen Dank für Deine Nachricht.</p>
</div>

  if($("#kontakt-form").valid()){

        var firstname = $('#contact-form-firstname').val(); //Validierung der Form-Daten
        var lastname = $('#contact-form-lastname').val();
        var email = $('#contact-form-email').val();
        var telephone = $('#contact-form-telephone').val();
        var message = $('#contact-form-message').val();

        $.ajax({ //AJAX request
            type: "POST",
            url: "../../../include/process/send_contactrequest_process.php",
            data: {firstname: firstname, lastname: lastname, email:email, telephone:telephone, message:message},
            success: function () {
                $('.kontakt-form-success-message').css( "display","inline" );
            },
        });
    }

Answer 1

它只是grecaptcha.getResponse(); 像这样调用这个函数:

if($("#kontakt-form").valid()){

    var firstname = $('#contact-form-firstname').val(); //Validierung der Form-Daten
    var lastname = $('#contact-form-lastname').val();
    var email = $('#contact-form-email').val();
    var telephone = $('#contact-form-telephone').val();
    var message = $('#contact-form-message').val();

    $.ajax({ //AJAX request
        type: "POST",
        url: "../../../include/process/send_contactrequest_process.php",
        data: {
          firstname: firstname,
          lastname: lastname,
          email:email,
          telephone:telephone,
          message:message,
          recaptcha:grecaptcha.getResponse()
        },
        success: function () {
            $('.kontakt-form-success-message').css( "display","inline" );
        },
    });
}

Answer 2

ReCaptcha 验证与表单提交不同。

1. 请参阅这篇文章，了解如何嵌入 reCaptcha 并验证用户和网站。

2. 验证成功后即可提交表单。请参阅此自动提交示例。但如果您更喜欢 ajax 表单提交，您可以将提交嵌套在 siteverify ajax 调用之后，如下所示：

   var onReturnCallback = function(response) { 
   var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';
   $.ajax({ 'url' : url,  // site verification ajax request
      dataType: 'json',
      data: { response: response},
      success: function( data  ) {  
           var res = data.success.toString();  
           if (res)
           { 
              var firstname = $('#contact-form-firstname').val(); 
              ....
              $.ajax({ //AJAX request of form submission
                   type: "POST",
                   url: "../include/process/send_contactrequest_process.php",
                   data: {firstname: firstname...},
                   success: function () {
                       $('.kontakt-form-success-message').css( "display","inline" );
                   },
               });
   
            } 
        }  // end success 
     });  // end $.ajax
   
   };  // end onReturnCallback