„Nie robot” Odśwież bez <form> ale AJAX zamiast

Question

Tradycyjny sposób korzystania "I am not a robot" Recpatcha wydaje się być z <form> na stronie klienta:

<form action="post.php" method="POST"> 
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div> 
    <button type="submit">Sign in</button> 
</form> 

<script src='https://www.google.com/recaptcha/api.js'></script> 

Wtedy niektórzy g-recaptcha-response zostanie wysłany do serwera.

---

Jednak w moim kodu nie używać <form> ale wywołanie AJAX Zamiast:

$('#btn-post').click(function(e) { 
    $.ajax({ 
    type: "POST", 
    url: "post.php", 
    data: { 
     action: 'post', 
     text: $("#text").val(), 
     ajaxMode: "true" 
    }, 
    success: function(data) { }, 
    error: function(data) { } 
    }); } }); 

** Jak uzyskać g-recaptcha-response odpowiedź z tego rozwiązania?

Answer 1

Używasz formularza, przerywasz przesyłanie formularza. Skonfiguruj formularz jak za normalny:

<form action="post.php" method="POST" id="my-form"> 
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div> 
    <input type="text" id="text"> 
    <button type="submit">Sign in</button> 
</form> 

<script src='https://www.google.com/recaptcha/api.js'></script> 

A potem użyć jQuery przerwać przedstawienie postaci oraz serialize it, co pozwala przekazać dane przez Ajax:

$('#my-form').submit(function(e) { 
    e.preventDefault(); 
    $this = $(this); 
    $.ajax({ 
     type: "POST", 
     url: "post.php", 
     data: $this.serialize() 
    }).done(function(data) { 
    }).fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 
}); 

Jak będzie trzeba zauważyłem, że użyłem .done i .fail zamiast success i error, to jest preferred way of handling the response.

Answer 2

Właśnie zaimplementowałem to bez użycia jakiegokolwiek formularza i mechanizmu przesyłania, odpowiednio. Tak więc, czyste rozwiązanie AJAX.

HTML kod:

<div id="recaptcha-service" class="g-recaptcha" 
data-callback="recaptchaCallback" 
data-sitekey=""></div> 
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script> 

kod JavaScript:

window.recaptchaCallback = undefined; 

jQuery(document).ready(function($) { 

    window.recaptchaCallback = function recaptchaCallback(response) { 
    $.ajax({ 
     method: "POST", 
     url: "http://example.com/service.ajax.php", 
     data: { 'g-recaptcha-response': response }, 
    }) 
     .done(function(msg) { 
     console.log(msg); 
     }) 
     .fail(function(jqXHR, textStatus) { 
     console.log(textStatus); 
     }); 
    } 

}); 

Punktem stosuje zwrotnego (recaptchaCallback w tym przypadku).

Pełniejszy przykład można znaleźć pod adresem https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084. Ten przykład wykorzystuje implementację PHP Google po stronie serwera (https://github.com/google/recaptcha).