php ajax 联系表答案

【问题标题】：php ajax contact formphp ajax 联系表
【发布时间】：2015-02-02 13:38:28
【问题描述】：

我正在使用 php 和 ajax 构建一个联系表单，代码如下：

HTML：

<head>
<script src="js/app.js"></script>      
</head>
<body>
<form id="ajax-contact" method="post" action="php/mailer.php">    
   <input type="text" id="name" name="name" required>
   <input type="text" id="email" name="email" required>
   <textarea id="message" name="message" required></textarea>    
   <input class="submit" type="submit" value="Send">
</form>
<div id="form-messages">
</div>
</body>

AJAX：

$(function() {
    var form = $('#ajax-contact');

    var formMessages = $('#form-messages');

});
$(form).submit(function(event) {
    event.preventDefault();

});
var formData = $(form).serialize();

$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
}).done(function(response) {
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');

    $(formMessages).text(response);

    $('#name').val('');
    $('#email').val('');
    $('#message').val('');
}).fail(function(data) {
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
});

邮寄者：

<?php

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = strip_tags(trim($_POST["name"]));
                $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        $recipient = "mailreceiver@example.com";

        $subject = "New contact from $name";

        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        $email_headers = "From: $name <$email>";

        if (mail($recipient, $subject, $email_content, $email_headers)) {
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

在 Ajax on action 中，我加载 php 邮件程序文件以将邮件发送到我当前的邮件地址，但我想在后台执行此操作，因为我使用的是 ajax，所以不应该加载页面......我想停留在表单的 html 页面上，而无需重定向到该 php 页面以发送该邮件，并仅在 div:form-messages 中显示成功或失败。

我在这里错过了什么？

【问题讨论】：

把ajax调用放到表单提交函数中。
试过了，还是被重定向了
尝试添加 return false;之前 event.preventDefault();
为什么选择@wayzz？ preventDefault() 应该是所有需要的。
尝试按钮类型而不是输入。

标签： php html ajax contact-form

【解决方案1】：

试试这个：

将您的输入提交按钮与“提交”类绑定，以使用 ajax 提交表单。您可以使用 $(form)[0].reset(); 重置表单没有明确的输入值

$('.submit').click(function() { //<-- changed/new
    var form = $('#ajax-contact');
    var formMessages = $('#form-messages');
    var formData = $(form).serialize();

    $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
    }).done(function(response) {
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            $(formMessages).text(response);

            $(form)[0].reset(); //<-- changed/new

    }).fail(function(data) {
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
    });
});

【讨论】：

为什么 OP 应该“尝试这个”？请清楚您为 OP 和未来的访问者所做的事情。此外，您没有阻止重定向。
从
中删除“方法”，然后再试一次，并从您的输入中删除 type="submit"
最后一次尝试：从
中删除操作并将“url: $(form).attr('action')”修改为“url: php/mailer.php”。如果仍然不起作用，请尝试将 eventHandler 函数添加到绑定单击中。
从表单中删除操作并将其更改为：url: php/mailer.php，停止重定向，但现在没有任何反应
在您的绑定点击代码中添加一个 alert(true)。如果单击输入时出现警报，则表示您的 AJAX 调用中有一些错误。以及锁定浏览器控制台的错误。

【解决方案2】：

试试这样的：

$('.submit').click(function(event) {
    //use this to dont submit the form
    event.preventDefault(); 
    //your ajax stuff
    $.ajax....
    //if you dont want to use the preventDefault function just
    return false;
}

【讨论】：

谢谢，但不会阻止重定向
评论$(form).submit(function(event) {函数
不太明白您的评论？

【解决方案3】：

尝试删除 action="php/mailer" 并执行以下操作

function sendEmail(message){
    var data = new XMLHttpRequest();
    data.open("POST","php/mailer.php");

    data.onreadystatechange = function(){
        if(data.readyState === 4 && data.status === 200){
            document.getElementById('results').innerHTML = "Email sent";
        }
    }
    data.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    data.send("message=" + message);
}

您可以在提交按钮中调用该函数。

【讨论】：