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

【问题标题】：AJAX/JQuery and PHP to send prompt without reload for a contact formAJAX/JQuery 和 PHP 无需重新加载联系表单即可发送提示
【发布时间】：2013-05-13 07:30:09
【问题描述】：

完整网站：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
}
?>

【问题讨论】：

对不起，我对此有点陌生，因此我使用教程来构建这两个。我会在我的 AJAX 中写“contactbutton.onPress {}”吗？
做两个教程可能会遗漏一些东西。如果您没有使用“表单”的内置功能（也就是说，您没有立即提交某些内容），那么根本不要使用表单。只需使用输入和按钮，然后在按钮上放置一个 onclick 事件，该事件调用 AJAX，进行检查并将其发送到 contact.php。我犯了和初学者完全一样的错误。
这是有道理的。我已经尝试进行此更改，但仍然无法正常工作。脚本如下所示：$(function() { $('.error').hide(); $('#contactbutton').submit(function (event) { event.preventDefault();Full website

标签： php javascript jquery html ajax

【解决方案1】：

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

使用，

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

       // Other code
     });
});

【讨论】：

这不起作用。我认为我的 PHP 存在问题，因为在本地运行时不会出现此问题，而且我对 PHP 很陌生。
您不能为多个元素保留相同的 id。在这里，您为多个元素定义了 ID 名称“name_error”。先改正
谢谢，我复制并粘贴了该标签，忘记更改 ID。我修复了它，它仍然无法正常工作。
@user2376526 你是否默认隐藏了 CSS 或任何地方的错误？
本地运行时不显示错误，所以这不是问题。我试过这样做，它根本没有显示错误。

【解决方案2】：

改变

<form action="contact.php" method="post">

到

<form action="contact.php" method="post" id="form_id">

改变

$(".button").click(function () { 到

$('#form_id').submit(function (event) {
event.preventDefault();
...
...

【讨论】：

【解决方案3】：

只需将按钮类型从提交更改为按钮，这样它就不会提交表单并默认进入php空白页面并为你调用函数。

【讨论】：

【解决方案4】：

尝试以下方法：

<form action="contact.php" method="post" onsubmit="return false;">

【讨论】：

【解决方案5】：

为什么不使用一个外部的.php（例如sendmail.php）脚本来处理你的php，而不是使用一个表单，然后使用jQuery来处理POST。

$.post('sendmail.php',{
   mail:mail,
   message:message
}, function(data) {
   //Echo either "success" or "false" in the sendmail.php script
   if(data == "success"){
      //Do something - e.g. (alert('Message has been sent');)
   }else{
      //Do something
   }
});

【讨论】：