php - AJAX/JQuery 和 PHP 无需重新加载联系表单即可发送提示

Question

完整网站:http://adamginther.com

我使用了两个单独的教程来构建它，一个用于 PHP，另一个用于 AJAX。我的目标是建立一个联系表单来检查错误。如果没有错误，则会提示用户消息已发送，无需刷新页面。

当网站在本地运行时，只有按下按钮才会显示错误，当在服务器上运行时，错误会在进入页面时显示。当按下联系按钮时，它会加载 PHP 并且页面变为空白。

HTML

<form action="contact.php" method="post">
<label name="firstName">Name: </label>
<input type="text" name="firstName" id="firstName">
<label class="error" for="firstName" id="name_error">I need your name.</label>
<br id="namebreak">
<br>
<label name="email" for="email" id="email_label">E-mail Address: </label>
<input type="text" name="email" id="email">
<label class="error" for="firstName" id="name_error">I need your e-mail.</label>
<br id="emailbreak">
<br>
<label name="message">Message: </label>
<textarea name="message" id="message"></textarea>
<label class="error" for="firstName" id="name_error">I need your message.</label>
<br id="messagebreak">
<br>
<input type="submit" value="Say Hello!" id="contactbutton" class="button">

JavaScript

$(function () {
    $('.error').hide();
    $(".button").click(function () {

        $('.error').hide();
        var name = $("input#firstName").val();
        if (name == "") {
            $("label#name_error").show();
            $("input#name").focus();
            $("#namebreak").hide();
            return false;
        }
        var email = $("input#email").val();
        if (email == "") {
            $("label#email_error").show();
            $("input#email").focus();
            $("#emailbreak").hide();
            return false;
        }
        var message = $("input#message").val();
        if (message == "") {
            $("label#message_error").show();
            $("input#message").focus();
            $("#messagebreak").hide();
            return false;
        }

        var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;

        $.ajax({
            type: "POST",
            url: "contact.php",
            data: dataString,
            success: function () {
                $('#contactme').html("<div id='message'></div>");
                $('#message').html("<p>Contact form submitted.</p>")
                    .append("<p>I will get back to you shortly.</p>")
                    .hide()
                    .fadeIn(1500, function () {
                    $('#message').append("<img id='checkmark' src='images/check.png' />");
                });
            }
        });
        return false;

    });
});

PHP

<?php
$field_firstName = $_POST['firstName'];
$field_email = $_POST['email'];
$field_message = $_POST['message'];

$mail_to = 'gintherthegreat@gmail.com';
$subject = 'AdamGinther.com message from '.$field_firstName;

$body_message = 'From: '.$field_firstName."\n";
$body_message .= 'E-mail: ' .$field_email."\n";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
    $('#panel').show();
    $('#output-inside').text('Thank you ' + firstName + ', I will get back to you as soon as I can.');
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        $('#panel').show();
    $('#output-inside').text('I am sorry ' + firstName + ', but there was a problem processing your request. I can be contacted by e-mail at GintherTheGreat@Gmail.com');   </script>
<?php
}
?>

Answer 1

我认为您需要防止提交按钮的默认操作。

使用，

$(function() {
    $('.error').hide();
    $(".button").click(function(e) {
       e.preventDefault();

       // Other code
     });
});