将reCaptcha添加到action.php

Question

我是非常业余的可以剪切和粘贴的开发人员，我正在尝试将reCaptcha v2添加到旧的html / php网站，

我已经完成了验证码的工作，唯一的问题是提交表单时，它会转到实际的地址/action.php并显示一些代码+“谢谢”消息。

         <?php
if($_POST) {

require('constant.php'); 

$user_name      = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$user_email     = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$user_phone     = filter_var($_POST["phone"], FILTER_SANITIZE_STRING);
$content   = filter_var($_POST["content"], FILTER_SANITIZE_STRING);

if(empty($user_name)) {
    $empty[] = "<b>Name</b>";       
}
if(empty($user_email)) {
    $empty[] = "<b>Email</b>";
}
if(empty($user_phone)) {
    $empty[] = "<b>Phone Number</b>";
}   
if(empty($content)) {
    $empty[] = "<b>Comments</b>";
}

if(!empty($empty)) {
    $output = json_encode(array('type'=>'error', 'text' => implode(", ",$empty) . ' Required!'));
    die($output);
}

if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
    $output = json_encode(array('type'=>'error', 'text' => '<b>'.$user_email.'</b> is an invalid Email, please correct it.'));
    die($output);
}

//reCAPTCHA validation
if (isset($_POST['g-recaptcha-response'])) {

    require('component/recaptcha/src/autoload.php');        

    $recaptcha = new \ReCaptcha\ReCaptcha(SECRET_KEY, new \ReCaptcha\RequestMethod\SocketPost());

    $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

      if (!$resp->isSuccess()) {
            $output = json_encode(array('type'=>'error', 'text' => '<b>Captcha</b> Please try the captcha again!'));
            die($output);               
      } 
}

$toEmail = "email@email.com";
$mailHeaders = "From: " . $user_name . "<" . $user_email . ">\r\n";
    $mailBody = "User Name: " . $user_name . "\n";
$mailBody .= "User Email: " . $user_email . "\n";
$mailBody .= "Phone: " . $user_phone . "\n";
$mailBody .= "Content: " . $content . "\n";
if (mail($toEmail, "Contact Mail", $mailBody, $mailHeaders)) {
    $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .', thank you for the comments. We will get back to you shortly.'));
    die($output);
} else {
    $output = json_encode(array('type'=>'error', 'text' => 'Unable to send email, please contact'.SENDER_EMAIL));
    die($output);
}
}?>

HTML如下

    <form id="frmContact" action="action.php" method="POST" novalidate="novalidate">
<div class="label">Name:</div>
<div class="field">
    <input type="text" id="name" name="name"
        placeholder="enter your name here"
        title="Please enter your name" class="required"
        aria-required="true" required>
</div>
<div class="label">Email:</div>
<div class="field">
    <input type="text" id="email" name="email"
        placeholder="enter your email address here"
        title="Please enter your email address"
        class="required email" aria-required="true" required>
</div>
<div class="label">Phone Number:</div>
<div class="field">
    <input type="text" id="phone" name="phone"
        placeholder="enter your phone number here"
        title="Please enter your phone number"
        class="required phone" aria-required="true" required>
</div>
<div class="label">Comments:</div>
<div class="field">
    <textarea id="comment-content" name="content"
        placeholder="enter your comments here"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="**My-Site-Key**"></div>
<div id="mail-status"></div>
<button type="Submit" id="send-message" style="clear: both;">Send
    Message</button>

它显示以下屏幕截图

我希望它不加载新网页，而只是在下面显示消息。

任何建议将不胜感激，皮特

Answer 1

我刚刚意识到问题是您正在使用另一个页面来处理该Recaptcha。 如果将HTML添加到php页面的末尾，则可以将同一页面用于HTML公式和PhP处理。 （在下面的旧部分中，我认为它是同一页）因此可以解决。 由于action.php与公式页面不同，因此它将输出发布到空的action.php页面上，而不是公式页面上。 您仍然可以使用下面列出的javascript来做到这一点！ PhP和HTML位于同一页面上。

希望能帮助到你

下面的旧部分！

之所以输出类似“ {type：message”之类的东西，是因为使用了“ json_encode”。 如果这不是问题，我想您只是想将其添加到页面中。 为此，您可以尝试使用AJAX请求，因为它可以动态更新网页而无需重新加载。 但是我该怎么做（因为我是noob xD），我将使PhP输出一个可更改且为空标签的javascript代码。 像这样。

<p id="output"></p>

然后添加php以输出JavaScript。

echo '<script>var elementOfIntrest = document.getElementById("output");elementOfIntrest.innerHTML = "Hi' . $user_name . ', thank you for the comments. We will get back to you shortly.";</script>';

但是，这仍然会使网页上重新加载新信息。

我不是100％地确定它会按您的意愿工作（并不完全确定您想要的），但是希望它会有所帮助。

如果您想通过AJAX请求进行操作，可以在此处阅读更多内容。