$ _POST变量在引导联系表单的ajax提交时为空

时间:2018-03-11 22:04:55

标签: php bootstrap-4 ajaxform

我之前已经问过这样的问题,但是没有人帮我解决这个问题。如果这是我忽略的愚蠢,那么我提前道歉。我在bootstrap模式中设置了一个联系表单。表单的html如下:

<div class="modal-body">
    <form id="contactForm" action="contact.php" method="post">
        <div class='form-group'>
            <label class='sr-only' for="name" sr-only="Name">Name</label>
            <input id="name" type="text" name="name" class="form-control" placeholder="Name">
        </div>
        <div class='form-group'>
            <label class='sr-only' for="email" sr-only="Email address">Email</label>
            <input id="email" type="email" name="email" class="form-control" placeholder="Email address">
        </div>
        <div class='form-group'>
            <label class='sr-only' for="message" sr-only="Your Message"></label>
            <textarea id="message" type="text" name="message" rows='6' class="form-control" placeholder='Type your message here...'></textarea>
        </div>
        <br>
        <div class="form-group">
            <label class="control-label" for="human" sr-only="Prove you're human.  What is 3 + 2?">Prove you're human:  3 + 2 = ?</label>
            <input type="text" class="form-control" id="human" name="human" placeholder="Type the number here">
        </div>
        <br>
        <button id='contactFormSubmit' type='submit' name='submit' class='form-control btn btn-block btn-lg btn-info'>
            <i class='fa fa-send'></i>&nbsp;&nbsp;Send Message
        </button>
    </form>
</div>

以下是ajax请求。请注意,有一些表单验证; ajax大约是代码的一半:

$('form#contactForm').submit(function(e) {
    e.preventDefault();
    $('input.borderRed, textarea.borderRed').removeClass('borderRed');
    var name = $('#name');
    var email = $('#email');
    var message = $('#message');
    var human = $('#human');
    var vals = [name, email, message, human];
    var emptyVals = [];
    for(var i=0; i < vals.length; i++) {
        if (vals[i].val() == '') {
            vals[i].addClass('borderRed');
            emptyVals.push(vals[i]);
        }
    }
    if (emptyVals.length > 0) {
        $('#intro').append('<div class="alert alert-danger alert-dismissable fade show"><strong>Please fill in all fields to send a message.</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
        return false;
    } else if(human.val() != 5) {
        $('#intro').append('<div class="alert alert-danger alert-dismissible fade show"> <strong>Try that math problem again!</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
        human.addClass('borderRed');
        return false;
    } else {
        $.ajax({
            data: $(this).serialize(),
            type: "POST",
            url: "contact.php", 
            success:function(response) {
                if (response == 'success') {
                    $('#intro').append('<div class="alert alert-success alert-dismissible fade show"> <strong>Your message was sent successfully.</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $('.borderRed').removeClass('borderRed');
                } else {
                    $('#intro').append('<div class="alert alert-danger alert-dismissible fade show"> <strong>There was a problem with your submission.  Please try again.</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                }
            }
        });
    }
});

最后,这是contact.php。请注意,这是不完整的。此时我正在尝试确认我收到$ _POST数据:

<?php
if( empty($_POST )) {
    echo "Post is empty.";
} elseif( !empty($_POST)) {
    echo "Post is not empty.";
}

print_r($_POST);

$to = '';
$subject = 'Contact Form Submission';
$header = "From: ".$name." <".$email.">";

$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
$message = wordwrap($message, 70);

$response = '';

if ($name && $email && $message) {
    $response = 'success';
    mail($to, $subject, $header, $message);
} else {
    $response = 'error';
}

echo $response;
?>

正如我的问题标题所示,我没有得到数据。在contact.php我得到空的帖子消息,而对于print_r($ _ POST),我得到了Array()。帖子数据没有到达,我无法弄清楚原因。

编辑:我应该提到如果我是console.log($(this).serialize());就在ajax调用之前,我在控制台窗口中获得了正确的序列化数据。所以数据就在那里,准备好在ajax调用之前。

1 个答案:

答案 0 :(得分:0)

  

打开浏览器窗口并将其指向localhost / mysite / contact.php。那个&#34; Post是空的&#34;消息被回显,我得到了&#34;数组()&#34;我的print_r输出($ _ POST)

所以这就是你在做的事情:

  1. 通过在浏览器窗口中打开HTML文档来发出GET请求
  2. 让HTML文档中的JavaScript向contact.php
  3. 发出POST请求
  4. 检查对该POST请求的响应
  5. 通过在浏览器窗口中打开GET请求contact.php
  6. 查看对该GET请求的回复
  7. 向之前向发出POST请求的网址发出GET请求不会向您显示您对该POST请求的响应。

    您有两个不同的请求和两个不同的回复。

    如果您想查看使用Ajax触发的请求的响应,那么您必须查看那个响应。您可以通过检查成功函数中的response变量或查看浏览器的开发人员工具的“网络”标签来执行此操作。