Javascript 通过ajax使用google recaptcha发布表单_Javascript_Php_Jquery_Ajax_Forms

Javascript 通过ajax使用google recaptcha发布表单

javascript php jquery ajax forms

Javascript 通过ajax使用google recaptcha发布表单,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我在十月有以下“联系我”表格（部分） <form name="sentMessage" id="contactForm" novalidate> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Name

我在十月有以下“联系我”表格（部分）

    <form name="sentMessage" id="contactForm" novalidate>
        <div class="row control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Name</label>
                <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Email Address</label>
                <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Phone Number</label>
                <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Message</label>
                <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <br>
        <div class="g-recaptcha" id="gcaptcha" data-sitekey="sitekeydataCjaelksjEJlakch"></div>
        <div id="success"></div>
        <div class="row">
            <div class="form-group col-xs-12">
                <button type="submit" class="btn btn-success btn-lg">Send</button>
            </div>
        </div>
    </form>


名称

电子邮件地址

电话号码

消息



发送

当用户单击submit时，它通过javascript进行处理（这有助于输入验证）。我正在使用JQuery

JS如下所示：

$(function() {
    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var gcaptcha = $("#gcaptcha").data('sitekey');

            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "././mail/contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message,
                    gcaptcha: gcaptcha
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

<?php

// Check for empty fields
if(empty($_POST['name'])        ||
   empty($_POST['email'])       ||
   empty($_POST['phone'])       ||
   empty($_POST['message']) ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
$secret = "alkfejasupersecretkeyalkjeociyseh13987fa9s8df7";
$gcaptcha = $_POST['gcaptcha'];
$remoteip = $_SERVER['REMOTE_ADDR'];

$url = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$gcaptcha."&remoteip=".$remoteip;
$result = json_decode($url, true);
var_dump($result);
/*
if ($result['success'] == 1) {
    //do mail here
}


// Create the email and send the message
$to = 'myemail@gmail.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
*/
?>

<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h2>Contact Me</h2>
            <hr class="star-primary">
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <form name="sentMessage" id="contactForm" data-request="onSend" data-request-success="alert('We have received your email. Thank you!'); this.reset();" novalidate>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Name</label>
                        <input name="name" type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Email Address</label>
                        <input name="email" type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Phone Number</label>
                        <input name="phone" type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Message</label>
                        <textarea name="contact-msg" rows="5" class="form-control" placeholder="Message" id="contact-msg" required data-validation-required-message="Please enter a message."></textarea>                         
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <br>
                <div class="g-recaptcha" id="sitekey" data-sitekey="gcaptchasitekey3897vadf834fadf"></div>
                <div id="success"></div>
                <div class="row">
                    <div class="form-group col-xs-12">
                        <button type="submit" class="btn btn-success btn-lg">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

$（函数（）{
$（“输入，文本区域”）.jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//其他错误消息或事件
},
submitSuccess：函数（$form，event）{
event.preventDefault（）；//防止默认提交行为
//从表单中获取值
变量名称=$（“输入名称”）.val（）；
var email=$（“输入电子邮件”）.val（）；
var phone=$（“输入电话”）.val（）；
var message=$（“textarea#message”）.val（）；
var gcaptcha=$（“#gcaptcha”）.data（'sitekey'）；
var firstName=name；//对于成功/失败消息
//检查名称中是否有空格以显示成功/失败消息
if（firstName.indexOf（“”）>=0）{
firstName=name.split（“”）.slice（0，-1）.join（“”）；
}
$.ajax({
url:“.//邮件/联系_me.php”，
类型：“POST”，
数据：{
姓名:姓名,，
电话:电话,，
电邮:电邮,，
讯息:讯息,，
gcaptcha:gcaptcha
},
cache:false，
成功：函数（）{
//成功信息
$（'#success'）.html（“”）；
$（'#success>.alert success'）.html（“×；”）
.附加（“”）；
$（“#success>.alert success”）
.append（“您的邮件已发送。”；
$（“#success>.alert success”）
.附加（“”）；
//清除所有字段
$（'#contactForm'）。触发器（“重置”）；
},
错误：函数（）{
//失败消息
$（'#success'）.html（“”）；
$（'#success>.alert danger'）.html（“×；”）
.附加（“”）；
$（“#success>.alert danger”）.append（“对不起”+firstName+”，我的邮件服务器似乎没有响应。请稍后再试！”）；
$（“#success>.alert danger”）.append（“”）；
//清除所有字段
$（'#contactForm'）。触发器（“重置”）；
},
})
},
过滤器：函数（）{
return$（this）.is（“：可见”）；
},
});
$（“a[数据切换=\”选项卡\“]）。单击（函数（e）{
e、 预防默认值（）；
$（此）.tab（“显示”）；
});
});

contact_me.php表单如下所示：

$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var message = $("textarea#message").val(); var gcaptcha = $("#gcaptcha").data('sitekey'); var firstName = name; // For Success/Failure Message // Check for white space in name for Success/Fail message if (firstName.indexOf(' ') >= 0) { firstName = name.split(' ').slice(0, -1).join(' '); } $.ajax({ url: "././mail/contact_me.php", type: "POST", data: { name: name, phone: phone, email: email, message: message, gcaptcha: gcaptcha }, cache: false, success: function() { // Success message $('#success').html("<div class='alert alert-success'>"); $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-success') .append("<strong>Your message has been sent. </strong>"); $('#success > .alert-success') .append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, error: function() { // Fail message $('#success').html("<div class='alert alert-danger'>"); $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); $('#success > .alert-danger').append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, }) }, filter: function() { return $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); }); });

<?php // Check for empty fields if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "No arguments Provided!"; return false; } $name = strip_tags(htmlspecialchars($_POST['name'])); $email_address = strip_tags(htmlspecialchars($_POST['email'])); $phone = strip_tags(htmlspecialchars($_POST['phone'])); $message = strip_tags(htmlspecialchars($_POST['message'])); $secret = "alkfejasupersecretkeyalkjeociyseh13987fa9s8df7"; $gcaptcha = $_POST['gcaptcha']; $remoteip = $_SERVER['REMOTE_ADDR']; $url = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$gcaptcha."&remoteip=".$remoteip; $result = json_decode($url, true); var_dump($result); /* if ($result['success'] == 1) { //do mail here } // Create the email and send the message $to = 'myemail@gmail.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. $email_subject = "Website Contact Form: $name"; $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; $headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true; */ ?>

<div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Contact Me</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <form name="sentMessage" id="contactForm" data-request="onSend" data-request-success="alert('We have received your email. Thank you!'); this.reset();" novalidate> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Name</label> <input name="name" type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Email Address</label> <input name="email" type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Phone Number</label> <input name="phone" type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Message</label> <textarea name="contact-msg" rows="5" class="form-control" placeholder="Message" id="contact-msg" required data-validation-required-message="Please enter a message."></textarea> <p class="help-block text-danger"></p> </div> </div> <br> <div class="g-recaptcha" id="sitekey" data-sitekey="gcaptchasitekey3897vadf834fadf"></div> <div id="success"></div> <div class="row"> <div class="form-group col-xs-12"> <button type="submit" class="btn btn-success btn-lg">Send</button> </div> </div> </form> </div> </div> </div>

正如你所看到的，我只是想看看我是否能够访问contact_me.php表单，而我似乎没有。在我把它注释掉之前——邮件从未发送过——这就是为什么我开始四处游荡，试图看看我的数据是否会出现在contact_me.php页面上。我在提交时看到了成功的消息，但是数据从来没有到过任何地方，也没有电子邮件

我可以在Firebug中看到，这些数据正在发布到contact_me中，但除此之外，我无法说出更多。var_转储不起作用，我需要进一步的帮助来更好地解决这个问题，或者找出什么不起作用。
在注释中得到Xorifelse的大量帮助后，我意识到代码可能很好（或者至少是合适的）
我最终选择了另一个方向。我对表单进行了一些更新，使其看起来像这样：

$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var message = $("textarea#message").val(); var gcaptcha = $("#gcaptcha").data('sitekey'); var firstName = name; // For Success/Failure Message // Check for white space in name for Success/Fail message if (firstName.indexOf(' ') >= 0) { firstName = name.split(' ').slice(0, -1).join(' '); } $.ajax({ url: "././mail/contact_me.php", type: "POST", data: { name: name, phone: phone, email: email, message: message, gcaptcha: gcaptcha }, cache: false, success: function() { // Success message $('#success').html("<div class='alert alert-success'>"); $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-success') .append("<strong>Your message has been sent. </strong>"); $('#success > .alert-success') .append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, error: function() { // Fail message $('#success').html("<div class='alert alert-danger'>"); $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); $('#success > .alert-danger').append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, }) }, filter: function() { return $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); }); });

<?php // Check for empty fields if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "No arguments Provided!"; return false; } $name = strip_tags(htmlspecialchars($_POST['name'])); $email_address = strip_tags(htmlspecialchars($_POST['email'])); $phone = strip_tags(htmlspecialchars($_POST['phone'])); $message = strip_tags(htmlspecialchars($_POST['message'])); $secret = "alkfejasupersecretkeyalkjeociyseh13987fa9s8df7"; $gcaptcha = $_POST['gcaptcha']; $remoteip = $_SERVER['REMOTE_ADDR']; $url = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$gcaptcha."&remoteip=".$remoteip; $result = json_decode($url, true); var_dump($result); /* if ($result['success'] == 1) { //do mail here } // Create the email and send the message $to = 'myemail@gmail.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. $email_subject = "Website Contact Form: $name"; $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; $headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true; */ ?>

<div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Contact Me</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <form name="sentMessage" id="contactForm" data-request="onSend" data-request-success="alert('We have received your email. Thank you!'); this.reset();" novalidate> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Name</label> <input name="name" type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Email Address</label> <input name="email" type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Phone Number</label> <input name="phone" type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Message</label> <textarea name="contact-msg" rows="5" class="form-control" placeholder="Message" id="contact-msg" required data-validation-required-message="Please enter a message."></textarea> <p class="help-block text-danger"></p> </div> </div> <br> <div class="g-recaptcha" id="sitekey" data-sitekey="gcaptchasitekey3897vadf834fadf"></div> <div id="success"></div> <div class="row"> <div class="form-group col-xs-12"> <button type="submit" class="btn btn-success btn-lg">Send</button> </div> </div> </form> </div> </div> </div>
我可以将JS文件精简为：

$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, filter: function() { return $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); }); }); /*When clicking on Full hide fail/success boxes */ $('#name').focus(function() { $('#success').html(''); });
因此，它在用户键入时提供活动验证（这很好）
此方法还需要在后端进行少量额外设置：
您需要在后端的设置部分创建一个新的“邮件模板”（代码：freeloper:：Mail.contact）（当然，还要确保您的邮件设置已设置）
一旦提交成功，我本想再做一点JS——因此，也许将来我会将其加入其中——但现在一切正常。
filter\u var（）
缺少类型检查，
==或=== 。如果邮件返回true 或false ，则要采取的第一步。更好的是，根本不要使用mail（）。var\u dump（$\u POST）会说什么？现在，mail（）被完全注释掉了-只是试图查看发布的内容，并确保所有内容都得到了适当的传递。var\u dump（$\u POST）没有说什么，我只是看到屏幕上弹出了成功消息。