Question

我有一个联系表单，它将带有ajax请求的信息发送到php脚本。现在我想实施谷歌＆＃34;我不是机器人＆＃34;验证码。

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

＆＃13;

<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>

＆＃13;

  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验证与表单提交不同。

有关如何嵌入reCaptcha并验证用户和网站的信息，请参阅this post。

验证成功后，您可以提交表格。请参阅this example并附带自动提交。但是，如果您更喜欢ajax表单submition，您可以在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

使用AJAX进行g-recaptcha-response

2 个答案: