Как вернуть JSON в HTML, используя PHP и AJAX без перенаправления?

Question

Я много искал решение этой проблемы, но не нашел ни одного. Я пытаюсь включить форму для отправки электронной почты (форму обратной связи) на моем сайте (используя Bootstrap). PHP используется для модели почтовой программы.

Проблема заключается в том, что сообщение, которое должно отображаться пользователю при отправке сообщения, не отображается в назначенном ему месте (#status) , а скорее я перенаправлен на новую страницу с массивом данных. https://drive.google.com/file/d/1tH8cVCWpx7pDe2OyxkGSKY6rnqV9KxlL/view?usp=sharing

Обратите внимание, что сообщение появляется во всех случаях проверки (когда имя или адрес электронной почты или тема или поля сообщения пусты ), только когда электронное письмо отправлено, оно направляет меня на другую страницу! https://drive.google.com/file/d/1lK11R2a18S2arExDegcZyOnITwRlIOYh/view?usp=sharing

Вот мой код:

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script> <
  script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> <
  script >
  function validateForm() {
    document.getElementById('status').innerHTML = "Sending...";
    formData = {
      'name': $('input[name=name]').val(),
      'email': $('input[name=email]').val(),
      'subject': $('input[name=subject]').val(),
      'message': $('textarea[name=message]').val()
    };

    $.ajax({
      url: "mail.php",
      type: "POST",
      data: formData,
      dataType: "json",

      success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message1);
        if (data.code) //If mail was sent successfully, reset the form.
          $('#contact-form').closest('form').find("input[type=text], textarea").val("");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#status').text(jqXHR);
      }
    });

  } <
  /script>

<div class="col-lg-8">
  <form id="contact-form" name="contact-form" action="mail.php" method="POST">
    <div class="row ">
      <div class="form-group col-md-6">
        <input class="form-control" placeholder="Name" id="name" name="name" required="required">
      </div>
      <div class="form-group col-md-6">
        <input type="email" class="form-control" placeholder="Email" id="email" name="email" required="required">
      </div>
      <div class="form-group col-md-12">
        <input type="text" class="form-control" placeholder="Subject" id="subject" name="subject" required="required">
      </div>
      <div class="form-group col-md-12">
        <textarea type="text" class="form-control" rows="6" placeholder="Message" id="message" name="message" required="required"></textarea>
      </div>
    </div>
    <div class="d-flex justify-content-end">
      <button type="submit" class="btn btn-lg btn-primary ml-auto" onclick="validateForm();">Send Message</button>
    </div>
    <div class="status" id="status"></div>
  </form>
</div>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
 $data = array();
if ($name === ''){
    $data['message1'] = 'Name cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
if ($email === ''){
    $data['message1'] = 'Email cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $data['message1'] = 'Email format invalid.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
}
if ($subject === ''){
    $data['message1'] = 'Subject cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
if ($message === ''){
    $data['message1'] = 'Message cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
$content="From: $name \nEmail: $email \nMessage: $message";
$recipient = "******@gmail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
$data['message1'] = 'Email successfully sent!';
    $data['code'] = 1;
print json_encode($data);
exit();
?>

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что поведение по умолчанию для отправки form - это поведение, которое вы обычно видите, когда браузеры взаимодействуют с протоколом HTTP. Ваш button имеет значение type submit и отправляет form.

Предполагая, что вы обрабатываете все логи c, которые вы хотите внутри validateForm, то, чего нет в вашем коде Вы намерены предотвратить поведение по умолчанию на submit:

$("#contact-form").submit(function(e) {
    e.preventDefault();
});