Question

如果我的问题的答案显而易见，很多道歉。

我正在尝试将Google reCaptcha纳入我的网站。

这是我页面HEAD中的javascript：

  var onSubmit = function(token) {
    $.ajax({
      type: 'POST',
      url: 'assets/php/contact.php',
      success: function(){
        alert('Thank you for your request ' + document.getElementById('name').value);
      }
    });
  };

reCaptcha可见且正常工作。

上面的代码给出了'success:'的结果，但是没有使用对php文件的调用来处理表单。

页面上的所有其他脚本都运行良好。

这是contact.php代码：

我已对代码进行了这些更改。然而，结果没有变化。这是php文件的代码：

<?php
    //contact form submission code

  //Validate data on the form 
  // define variables and set to empty values
  $name = $email = $message = "";

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = contact_input($_POST["name"]);
    $email = contact_input($_POST["email"]);
    $message = contact_input($_POST["message"]);
  }

  function contact_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }
  // if the url field is empty
if(isset($_POST['url']) && $_POST['url'] == ''){
  // put your email address here
  $youremail = 'my@email.co.uk';
  // prepare a "pretty" version of the message
  // Important: if you added any form fields to the HTML, you will need to add them here also
  $body = "Contact Form from Wilderness Canoe website just submitted:
  Name: $_POST[name]
  E-Mail: $_POST[email]
  Message: $_POST[message]";
  // Use the submitters email if they supplied one
  // (and it isn't trying to hack your form).
  // Otherwise send from your email address.
  if( $_POST['email'] && !preg_match( "/.+@.+\..+/i", $_POST['email']) ) {
    $headers = "From: $_POST[email]";
  } else {
    $headers = "From: $youremail";
  }
  // finally, send the message
  mail($youremail, 'Contact Form', $body, $headers );
}

?>

以及表单的代码：

    <form id="form" method="post" action="assets/php/contact.php" onsubmit="return validate();">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <i class="zmdi zmdi-account mdc-text-light-blue zmdi-hc-2x txtfields"></i>
        <label class="mdl-textfield__label" for="name"> Full Name</label>
        <input class="mdl-textfield__input " type="text" id="name" required name="name">
        <!--error msg ><span class="mdl-textfield__error">Only alphabet and no spaces, please!</span-->
      </div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <i class="zmdi zmdi-email mdc-text-light-blue zmdi-hc-2x txtfields"></i>
        <label class="mdl-textfield__label" for="email">Your Email</label>
        <input class="mdl-textfield__input " type="text" id="email" required name="email">
        <!--error msg ><span class="mdl-textfield__error">Valid email only, please!</span-->
      </div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <i class="zmdi zmdi-comment-text mdc-text-light-blue zmdi-hc-2x txtfields"></i>
        <label class="mdl-textfield__label" for="message">Your Message/Comment</label>
        <textarea class="mdl-textfield__input " type="text" rows= "1" max-rows="4" id="message" name="message"></textarea>
      </div> 

      <!-- antispam --><p class="antispam">Leave this empty: <input type="text" name="url" /></p>

      <!-- RECAPTCHA -->
      <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

      <div class="clear"><button type="submit" value="Send" name="submit" id="mc-embedded-contact" class="send">Submit</button></div>
    </form>

完整的javascript：

<script type="text/javascript">

      var onSubmit = function(token) {
        var formData = $("#form").serialize();
        $.ajax({
          type: 'POST',
          data: formData,
          url: 'assets/php/contact.php',
          success: function(){
            alert('Thank you for your request ' + document.getElementById('name').value);
          }
        });
      };

      var onloadCallback = function() {
        grecaptcha.render('mc-embedded-contact', {
          'sitekey' : '6Ldbfg8UAAAAAAaWVBiyo4uGfDqtfcnu33SpOj6P',
          'callback' : onSubmit
        });
      };
    </script>

Answer 1

您的ajax请求不会在您的代码中发送任何表单数据。您应该添加如下表单数据：

var onSubmit = function(token) {
  var formData = $("#yourFormId").serialize();

  $.ajax({
     type: 'POST',
     data: formData,
     url: 'assets/php/contact.php',
     success: function(){
       alert('Thank you for your request ' + document.getElementById('name').value);
     }
   });
};

从javascript / Google recaptcha调用php文件

1 个答案: