Question

我不知道如何将这个应用到我的登录页面，一旦在ajax上获得验证码成功响应，然后提交表单。这是我的html表单（我将操作留空，因为我还在测试中）

development

以下是我如何理解验证码发送验证字的ajax ...如果验证码development提交表格如果<form action = "" method = "post"> <input type = "text" id = "email" name = "email"> <input type = "password" id = "pass" name = "password"> <div class = "form-group col-lg-6"> <div class="g-recaptcha" data-sitekey="MY_KEY"></div> </div> <input type = "button" id = "submit" value = "submit"> </form>我会给success。

failed

我的alert我如何收到$('#submit').click(function() { var captcha = "captcha"; $.ajax({ url: "captcha.php", method: "post", data:{captcha:captcha}, success:function(data){ if(data=='success'){ $('form').submit(); } } else{ alert('captcha failed. try again'); } }); });

captcha.php

请帮助我了解它将如何工作以及如何使用AJAX完成谢谢你提前:)）

更新

我只是注意到我可以$_POST['captcha'] ??

Answer 1

您可以使用此代码：

HTML代码：

<form action="" method="POST" id="loginForm">
    <input type="text" id = "email"  name="email">
    <input type="password" id="pass" name="password">
    <textarea type="text" name="message"></textarea>
    <div class="g-recaptcha" data-sitekey="10LDDpf0ehtMZY6kdJnGhsYYY-6ksd-W"></div>
    <input type="submit" name="submit" value="SUBMIT">
</form>

<强>的JavaScript

$(document).ready(function() {
  var loginForm = $("#loginForm");
  //We set our own custom submit function
  loginForm.on("submit", function(e) {
    //Prevent the default behavior of a form
    e.preventDefault();
    //Get the values from the form
    var email = $("#email").val();
    var pass = $("#pass").val();
    //Our AJAX POST
    $.ajax({
      type: "POST",
      url: "login.php",
      data: {
        email: email,
        password: pass,
        //This will tell the form if user is captcha varified.
        g-recaptcha-response: grecaptcha.getResponse()
      },
      success: function(response) {
        console.log(response);
        //console.log("Form successfully submited");
      }
    })
  });
});

PHP代码：

<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])):
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
        //your site secret key
        $secret = '10LDDpf0ehtMZY6kdJnGhsYYY';
        //get verify response data
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
        $responseData = json_decode($verifyResponse);
        if($responseData->success):
            //captacha validated successfully.
            $email = !empty($_POST['email'])?$_POST['email']:'';
            $password = !empty($_POST['password'])?$_POST['password']:'';
            echo "captacha validated successfully.";
        else:
            echo "Robot verification failed, please try again.";
        endif;
    else:
         echo 'invalid captcha';
    endif;
else:
   //Nothing
endif;
?>

Answer 2

我正在使用jQuery / ajax进行重新验证码验证，如下所示：

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post" name="contactForm">
    <input type="text" name="fname"/>
    <input type="text" name="lname"/>
    <input type="text" name="Phone"/>
    <div class="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="dark"></div>
    <input value="submit" type="submit"/>
</form>

验证/ ajax：

//Initialize jQuery 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    var onReturnCallback = function(response) { 
      var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';  
        $.ajax({ 'url' : url, 
                   dataType: 'json',
                   data: { response: response},
                   success: function(result) {                     
                    var res = result.success.toString();
                            alert(res);                    
                    if (res ==  'true') { 
                           document.getElementById('g-recaptcha').innerHTML = ' Your Success Message'; 
                                    } 
                               } 
             });
    }; 
    </script>

使用jquery AJAX进行Google reCaptcha验证

2 个答案: