Bootstrap表单不会通过AJAX加载消息，而是在不同的页面上显示PHP成功消息

Question

I have a bootstrap form that on submit takes me to a different page showing the success message generated by the PHP script rather than submitting and adding the message to the relevant div in my contact form via AJAX.

My contact form:

    <form class="text-left" id="ajax-contact" name="contact-form" 
    role="form" method="post" action="mailer.php">
      <div class="form-group">
        <label for="name" class="text-white">Name</label>
        <textarea class="form-control" name="name" id="name" rows="1" 
        placeholder="Enter your name" required="required" data-error="Please 
        enter your name."></textarea>
      </div>
      <div class="form-group">
        <label for="email" class="text-white">Email address</label>
        <input type="email" class="form-control"  name="email" id="email" 
        placeholder="[e-mail]" required="required" data- 
        error="Please enter a valid email.">
      </div>
      <div class="form-group">
        <label for="message" class="text-white">Message</label>
        <textarea class="form-control" name="message" id="message" rows="5" 
        placeholder="Write you message..." required="required" data- 
        error="Please enter your message."></textarea>
      </div>
      <p id="submit-wrapper"><button type="submit" class="btn" id="submit- 
      btn">Submit</button></p>
    </form>

My javascript:

    $(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,
          dataType: 'json'
          }).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.');
          };
      });
   });
});

My PHP script:

   <?php


    if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("","
"),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 = "[e-mail]";


    $subject = "New contact from $name";


    $email_content = "Name: $name
";
    $email_content .= "Email: $email

";
    $email_content .= "Message:
$message
";


    $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.";
    }

    ?>

I've searched everywhere but cannot for the life of me find out why this is not working. The email is also not being sent to my inbox (I've edited the email in this example, the code that I have running contains my real email address).

Please help! Thanks in advance.