Question

我正在尝试发送一封包含PHP和Ajax的电子邮件，邮件程序正在运行，但我对Ajax知之甚少，在阅读了几本书之后我写了一小段代码并希望有人可以指出在我错的地方：

这是我的PHP：

<?php


$name =  ($_POST['name']);
$email =  ($_POST['email']);
$fsubject =  ($_POST['subject']);
$message = ("Name: ". $name . "\nEmail Address: " . $email . "\n\nMessage: " . $_POST['message']);


// Set Mail
$to = "emailaddress@fakeone.com";
$headers = 'emailaddress@fakeone.com' . "\r\n";
$subject = "{$fsubject}";
$body = "{$message}";


// Send Mail
if (mail($to, $subject, $body, $header)) 
{
    echo("<p>Message successfully sent!</p>");
} 
else 
{
    echo("<p>Message delivery failed...</p>");
}

?>

我的HTML：

<div id="success" style="color:red;"></div>

<form action="" id="contactform" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100"     class="form-control" name="name" id="name">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10"     class="form-control" name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="submit" value="Send Message" class="btn btn-info btn-lg" data-loading-text="Loading...">
</div>
</form>

我的AJAX：

<script>
        $(document).ready(function(){

        $('#submit').click(function(){

        $.post("sendmail.php", $("#contactform").serialize(),  function(response) {
        $('#success').html(response);
        //$('#success').hide('slow');
            });
            return false;
        });

        });
    </script>

在同一页面重新加载的那一刻，所期望的结果只是一个微妙的成功或失败消息出现。

欢迎任何帮助！

谢谢，丹

Answer 1

您的代码段似乎运行得很好。它必须是其他JS（例如检查浏览器控制台，Chrome中的F12）或PHP中的错误。

试试这个以查看ajax帖子是否失败：

<script>
        $(document).ready(function(){

        $('#submit').click(function(){

        $.post("contact.php", $("#contactform").serialize(),  function(response) {
        $('#success').html(response);

            }).fail(function() {
                alert( "error" );
            });
            return false;
        });

        });
    </script>

另外，尝试确保PHP执行正常，因此删除所有javascript并替换

<form action="sendmail.php" id="contactform" method="post">

检查该页面的结果，应该是“消息已成功发送！”。

另外，检查代码的简单JS代码段： http://jsfiddle.net/CPtpk/

请注意，如果您的网页中有其他JavaScript代码可能导致此问题。即使你的JS错误在另一个地方，它也可能导致JS执行停止，因此你的onClick没有被执行，这就是你得到问题的原因......

Answer 2

在JS上尝试这样的事情：

<script>
        $(document).ready(function() {
    $('#contactform').submit(function(e) {
        e.preventDefault();

        $.post("sendmail.php", $(this).serialize(),  function(response) {
            $('#success').html(response);
        });
    });
});
</script>

联系表格同页成功

这是我的PHP：

我的HTML：

我的AJAX：

2 个答案: