С О З Д А Н И Е

Сайтов в Пензе

Отправить всю HTML форму целиком AJAX PHP

Очень часто на сайтах крупных и небольших компаний Вы можете встретить страницу контактов, где каждый желающий может связаться с администрацией или владельцами фирмы и задать интересующих их вопрос. Это просто и удобно. Постарайтесь вспомнить как обычно проиходит передача данных из HTML формы на сервер для обработки информации. Обычно это выглядит очень не привлекательно к пользователю, ведь нужно ждать, пока закончится передача прикреплённых файлов, произойдет отправка всех данных из формы и, что самое страшное, произойдёт обновление страницы. Поскольку скорость обработки напрямую зависит от скорости Интернета и мощности компьютеров (на что мы не можем напрямую повлиять), нам остаётся только сделать процесс передачи информации из HTML формы более привлекательной. В этом уроке мы расскажем Вам как отправить всю форму целиком при помощи JavaScript, PHP и AJAX.

HTML

  1. <form method="POST" id="contact" action="javascript:void(null);" onsubmit="contact()">
  2. <input type="text" name="name" placeholder="Фамилия и Имя" required>
  3. <input type="email" name="email" placeholder="Email адрес" required>
  4. <input type="text" name="subject" placeholder="Тема обращения" required>
  5. <textarea name="message" cols="30" rows="10" placeholder="Текст сообщения . . ." required></textarea>
  6. <button type="submit">Отправить сообщение</button>
  7. </form>
  8.  
  9. <div id="result_contact"></div>

Java Script

  1. <script type="text/javascript" language="javascript">
  2. function contact() {
  3. var msg = $( '#contact' ).serialize();
  4. $.ajax( {
  5. type: 'POST',
  6. url: 'contact.php',
  7. data: msg,
  8. beforeSend: function () {
  9. $( '#result_contact' ).html( '<img src="images/load.svg" />' );
  10. },
  11. success: function ( data ) {
  12. $( '#result_contact' ).html( data );
  13. },
  14. error: function ( xhr, str ) {
  15. alert( 'Возникла ошибка: ' + xhr.responseCode );
  16. }
  17. } );
  18.  
  19. }
  20. </script>

Разберём подробнее HTML код. Первой и седьмой строкой мы объявляем форму c методом передачи данных POST, с идентификатором contact, без действия и при отправке использовать JS функцию contact().

Метод передачи информации может быть либо POST (как в нашем случае), либо GET. Основные отличия только два, а именно при методе GET передаваемая информация будет отображаться в адресной строке браузера, а при POST все передаваемые переменные будут незаметно передаваться напрямую веб серверу. Так же есть отличие в количестве и типах передаваемыех данных. В GET можно передавть с ограничением на количество символов, а в POST можно передавать так же файлы и без ограничений на количество символов, байт и т.п.

Далее с помощью тегов input и textarea мы создаем необходимые поля формы, которым даём имя и незабываем указывать тип поля. Атрибут placeholder отвечает за вывод подсказки, когда поле пустое, а атрибут required указывает на то, что данное поле обязательно должно быть заполнено пользователем, иначе форма просто не отправится. После создаём одну кнопку с помощью тега button с типом submit (отправить форму). Закрываем нашу форму и добавляем блок с ID, в котором мы будем выводить ответ AJAX запроса. В нашем случае это будет либо положительный ответ, что письмо успешно отправлено, либо отрицательный.


Другие уроки

Информация

  • Дата : 01.12.2019 18:34
  • Категория : Готовый код
  • Просмотров : 800
6