Question

我想在表单中添加reCaptcha V3。

这是表格：

<form action="mail.php" method="POST">
    <!-- This hidden input will contain the token -->
    <input type="hidden" name="token" id="token" />
    <input type="text" name="name" />
    <input type="text" name="email" />
    <textarea name="message"></textarea>
    <input type="submit" name="submit" value="Send" />
</form>

现在我正尝试将token值发送到mail.php，所以有一个名为jquery.form的插件可以用来发送Ajax请求。

这是Javascript / Jquery代码：

$('form').ajaxForm({

    beforeSubmit: function() {

        //Captcha part
        grecaptcha.ready(function() {

                grecaptcha.execute('My_website_key', {action: 'form'}).then(function(token) {

                    //Set token value to the hidden element
                    $('#token').val(token);

                });

        });//reCaptcha ready    

    },//Before submit function
    success: function(msg) {

        if(msg == 'Message has been sent.'){
            console.log('success!');
        }else{
            console.log(msg);
        }

    },//success function
    complete: function(xhr) {

        console.log(xhr.responseText);  

    }//complete function

});//End Ajax

提交表单时，然后看一下控制台，发现token为空，并且似乎在success隐藏元素之前执行了token函数获取令牌。

在页面加载或任何其他操作时，我无法添加令牌，因为它会在2分钟后过期，所以我需要获取一个令牌并将其发送到PHP文件。

Answer 1

您需要在Recaptcha处理程序中移动ajax请求，因为beforeAjax不会等待其内容被解析，请按如下所示更改代码：

// Fake grecaptcha method !!! you should delete this
// Form URL was changed as well to satisfy the example
let grecaptcha = {
  ready: function(cb) {
    cb();
  },
  execute: function(key, options) {
    return Promise.resolve('recaptchatoken');
  }
};

let formElem = $('form');

formElem.submit(function(e) {
  e.preventDefault();

  let thisForm = $(this);

  grecaptcha.ready(function() {
    grecaptcha.execute('My_website_key', {
      action: 'form'
    }).then(function(token) {

      $('#token').val(token);

      thisForm.ajaxSubmit({
        success: function(msg) {

          if (msg == 'Message has been sent.') {
            console.log('success!');
          } else {
            console.log(msg);
          }

        },
        complete: function(xhr) {

          console.log(xhr.responseText);

        }

      });


    });

  });

  return false; // false = prevent submit 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<form action="//reqres.in/api/users" method="POST">
  <!-- This hidden input will contain the token -->
  <input type="hidden" name="token" id="token" />
  <input type="text" name="name" />
  <input type="text" name="email" />
  <textarea name="message"></textarea>
  <input type="submit" name="submit" value="Send" />
</form>

使用Ajax将reCaptcha令牌发送到PHP

1 个答案: