Не могу создать простой php - Ajax working

Question

Я хочу создать простую форму контакта, используя JQuery с вызовом ajax и PHP. Но это не работает, и я не понимаю, почему. Вы можете подумать, что нет ошибки имени id или класса.

Мои 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); 

?> 

Мой сайт обновляется, а почта, отправленная. Я уже тестировал свой сервер с помощью простой почты(), и он отлично работает: никаких проблем на стороне сервера.

Answer 1

Вопрос, как мне кажется, является обратной передачей, когда форма отправляется. Поскольку вы используете событие click на кнопке (предположение), и его поведение по умолчанию заключается в том, чтобы отправить форму и это приведет к обратной передаче.

Как вы используете ajax для отправки значений в бэкэнд, поэтому вам нужно использовать event.preventDefault(), чтобы остановить отправку формы .

Вы должны остановить событие с 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>'); 
     }); 
    } 
    }); 
});