Ajax: Как сделать запрос к PHP-коду без перезагрузки страницы

HTML-код формы

<input name="email" placeholder="Email"><br>
<input name="name" placeholder="Имя"><br>
<input name="phone" placeholder="Телефон"><br>
<textarea name="message" placeholder="Сообщение"></textarea><br>
<input type="button" value="Отправить сообщение">
<div class='result'></div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>window.JQuery || document.write('<script src="js/jquery-3.1.1.min.js"><\/script>');</script>
<script src='js/script.js'></script>

Отправка формы без перезагрузки страницы

$('[type="button"]').click(function() {
 $.post( 

 "submit.php", //url

 { //данные из формы
 email: $('[name="email"]').val(),
 name: $('[name="name"]').val(),
 phone: $('[name="phone"]').val(),
 message: $('[name="message"]').val()
 }, 

 function( data ) { //после отправки данных
 $( ".result" ).html(data);
 }

 );
});

PHP обработчик

if (!empty($_POST['name']) AND !empty($_POST['email']) AND !empty($_POST['message'])){

  $headers = 'From: Иванов Иван\r\n'.
             'Reply-To: XXXXXXXX@gmail.com\r\n'.
              'X-Mailer: PHP/'. phpversion();

  $theme = 'Новое сообщение';

  $letter = 'Данные сообщения:\r\n';
  $letter .='Имя: '.$_POST['name'].'\r\n';
  $letter .='Email: '.$_POST['email'].'\r\n';
  $letter .='Телефон: '.$_POST['phone'].'\r\n';
  $letter .='Сообщение: '.$_POST['message'].'\r\n';

  if (mail('XXXXXXXX@gmail.com', $theme, $letter, $headers)){
    echo "Сообщение отправлено!";
  } else {
    echo "Ошибка при отправке!";
  }
} else {
  echo "Ошибка: Заполните все поля!";
}

Скачать пример