无法使简单的 php - Ajax 工作

Question

我想使用 Jquery 通过 ajax 调用和 PHP 构建一个简单的联系表。但它不起作用，我不明白为什么。你可以认为没有id或者class名字的错误。

我的Javascript

 jQuery('#contacter').click(function () {       

        var postdata = $('.contact-form form').serialize();

        $.ajax({
            type: 'POST',
            url: 'contact.php',
            data: postdata,
            success: function () {

                $('.contact-form form').fadeOut('fast', function () {
                    $('.contact-form').append('<p>Thanks for contacting us! We will get back to you very soon.</p>');


                });

            }
        });


    });

我的PHP

<?php

// Enter the email where you want to receive the message
$emailTo = 'example@gmail.com';

$clientEmail = addslashes(trim($_POST['email']));
$subject = addslashes(trim($_POST['subject']));
$message = addslashes(trim($_POST['message']));
$antispam = addslashes(trim($_POST['antispam']));


$headers = "From: " . $clientEmail . " <" . $clientEmail . ">" . "\r\n" . "Reply-To: " . $clientEmail;
mail($emailTo, $subject , $message, $headers);

?>

我的网站刷新后没有发送邮件。我已经用一个简单的 mail() 测试了我的服务器，它工作正常：服务器端没有问题。

Answer 1

在我看来，问题是提交表单时发生回发。当您在按钮 （假设） 上使用 click 事件时，它的默认行为是提交表单，这会导致回发。

由于您正在使用 ajax 向后端提交值，因此您需要使用 event.preventDefault() 来停止 表单 submission/default 行为 。

您必须通过 event.preventDefault() 停止活动：

 jQuery('#contacter').click(function (e) {  // <-----pass e for event here    
    e.preventDefault(); // and stop it here

如果您正在使用 form 元素，那么最好使用 submit 事件：

jQuery('.contact-form form').submit(function(e) { // e in the args
  e.preventDefault(); // stop the submission here.
  var postdata = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: 'contact.php',
    data: postdata,
    success: function() {
      $('.contact-form form').fadeOut('fast', function() {
        $('.contact-form').append('<p>Thanks for contacting us! We will get back to you very soon.</p>');
      });
    }
  });
});

无法使简单的 php - Ajax 工作

Can't make a simple php - Ajax working

javascript

php

ajax

jquery

contact-form