jQuery/PHP ajax 联系表

Question

我已经为此奋斗了很长一段时间，搜索问题、教程和论坛以找不到有效的解决方案。我在 PHP 领域非常熟悉，现在才开始学习。

可在此处找到正在进行的页面：http://williamsfuller.com/limedropdesign/

目标：使用 jQuery Validate (http://jqueryvalidation.org/) 进行前端验证，如果验证成功，则在 submitHandler 中运行对 php 文件的 ajax 调用，该文件获取表单值并将它们发布到服务器。在 ajax.done 函数上清除表单并显示提交已成功。

我使用 ajax 的原因是我不希望页面刷新并将用户返回到页面顶部。这是一个单页作品集，如果我要在表单上使用 post 方法，它会通过重新加载页面来破坏体验。

到目前为止我所取得的成就： -我有 jQuery 验证工作 - 如果验证成功，则 ajax 调用正确运行，激活联系表单提交文件 - 在 ajax.done 函数中，联系表单会被清除，并且成功消息会向下滑动，告诉用户消息已发送 - 在 php 方面，我能够硬编码一个运行的邮件函数，它告诉我 ajax 调用正在工作并且 php 文件正在工作。

<?php    
mail('email@gmail.com', 'Mail from Lime Drop Design', 'some body content for the email ');
?>

我遇到困难的地方是获取 jQuery 值并将它们放入一个有效的 if($_POST){} 中，然后发送一封电子邮件。

我在表单中还有一个蜜罐来捕获一些机器人，如果所有信息都经过验证并且主题字段仍然填写，我希望让 POST 死掉。

HTML：

<form id="contactForm" method="get" action="">
<div class="form-group">
    <input class="form-control"
           type="text"
           name="name"
           id="name"
           minlength="2"
           placeholder="Name" required>
</div>
<div class="form-group">
    <input class="form-control"
           type="email"
           name="email"
           id="email"
           placeholder="Your email address" required>
</div>
<div class="form-group">
    <textarea class="form-control contactMessage"
              name="message"
              id="message"
              rows="8"
              minlength="10"
              placeholder="Enter a message" required></textarea>
</div>

<input type="text" id="subject" name="subject" autocomplete="off">

<div class="form-actions">
    <input type="hidden" name="save" value="contact">
    <button id="formSubmit" type="submit" class="btn contact-btn pull-right">Send</button>
</div>
<div id="result">
    Thank you, your message has been sent to Liz!
</div>
</form>

JavaScript：

$(document).ready(function(){
    $('#result').hide();
    $.validator.setDefaults({
        submitHandler: function() {
            var nameValue = $('#name').val();
            var emailValue = $('#email').val();
            var messageValue = $('#message').val();
            console.log(nameValue, emailValue, messageValue);
            $.ajax({
                type: "GET",
                url: "contactSubmission.php",
                data: {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    message: $('#messageValue').val()
                }
            }).done(function(){
                $('#contactForm').find("input[type=text], input[type=email], textarea").val("");
                $('#result').slideDown();
            });
        }
    });
    $("#contactForm").validate();
)};

PHP 工作：

<?php
mail('email@gmail.com', 'Mail from Lime Drop Design', 'some body content for the email outisde post function');
?>

PHP 不工作（我正在努力实现的目标）：

<?php
if($_POST){
$to = 'email@gmail.com';
$subject = 'Contact Form Submission';
$message = $_POST['messageValue'];


if($_POST['subject'] != ''){
    die();
}

//Sanitize input data using PHP filter_var().
$nameValue        = filter_var($_POST["nameValue"], FILTER_SANITIZE_STRING);
$emailValue       = filter_var($_POST["emailValue"], FILTER_SANITIZE_EMAIL);
$messageValue     = filter_var($_POST["messageValue"], FILTER_SANITIZE_STRING);

mail($to, $subject, $message);
}
?>

对此的任何帮助将不胜感激。我一直试图让它工作一段时间，我现在似乎只是停留在 php POST 上。提前感谢任何输入或工作示例。

Answer 1

正如所指出的，您正在使用 Jquery 发出一个 GET 请求，而 php 期望一个 POST 请求。

然后在你的 php 中，post 字段不好：你把'Value' post 字段： $_POST["nameValue"] 在 Jquery 上似乎该字段名为 name，尝试将 $_POST["nameValue"] 更改为 $_POST["name"] 并对消息和电子邮件执行相同操作。

编辑：在您的 Jquery 代码中将帖子数据中的 $('#messageValue').val() 更改为 $('#message').val()，此值是数据未成功发送到 PHP 的原因，在您的 console.log 中您输入了正确的 ID但不是在帖子数据中，这就是为什么你认为正确的值是由 php 发送的。