"नॉट ए रोबोट" एक <form> बिना recaptcha लेकिन AJAX के बजाय

Question

"I am not a robot" Recpatcha का उपयोग कर के पारंपरिक तरीके से ग्राहक पक्ष पर एक <form> साथ हो रहा है:

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

फिर कुछ g-recaptcha-response सर्वर से भेजा जाएगा।

$('#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) { } 
    }); } }); 

** कैसे इस समाधान के साथ g-recaptcha-response जवाब पाने के लिए:

---

लेकिन, मेरा कोड में मैं एक <form> लेकिन इसके बजाय एक AJAX कॉल का उपयोग नहीं करते?

Answer 1

आप एक फॉर्म का उपयोग करते हैं, फॉर्म के सबमिशन को बाधित करते हैं। सामान्य प्रति के रूप में एक विधि सेट करें:

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

और फिर आप jQuery का उपयोग फार्म और serialize it प्रस्तुत करने बाधित करने के लिए, आप अजाक्स के माध्यम से डेटा भेजने के लिए अनुमति देता है:

$('#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); 
    }); 
}); 

आप होगा के रूप में मैंने देखा है कि success और error के बजाय मैंने .done और .fail का उपयोग किया है, यह preferred way of handling the response है।

Answer 2

मैंने इसे किसी भी फॉर्म का उपयोग किए बिना लागू किया और क्रमशः तंत्र जमा किया। इस प्रकार, एक शुद्ध AJAX समाधान।

एचटीएमएल कोड:

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

जावा स्क्रिप्ट कोड:

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

}); 

बिंदु एक कॉलबैक (recaptchaCallback इस मामले में) का उपयोग किया जाता है।

आप https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084 पर एक और पूर्ण उदाहरण पा सकते हैं। वह उदाहरण सर्वर के पक्ष में Google के PHP कार्यान्वयन का उपयोग करता है (https://github.com/google/recaptcha)।