AJAX контактная форма (jQuery) онлайн урок.


В этом уроке мы рассмотрим пример отправки данных AJAX формы при помощи jQuery (аналогично тому, как это было сделано при помощи JS).

Для этого нам потребуются те же самые скрипты post.php, get.php - они останутся без изменений.

Рассмотрим страничку с формой. Как уже было отмечено, сам тег формы не обязателен.
<input type="text" name="name" id="name"/>
<input type="email" name="email" id="email"/>
<input type="text" name="phone" id="phone"/>
<textarea name="message" id="message"></textarea>
<input type="button" id="submit-btn" value="Go"/>

По сравнению с чистым JS мы убрали обработку события onclick, т.к. это событие обработается в самом скрипте. Приведем скрипт, который обрабатывает клик по кнопке и отправляет запрос:

$(document).ready(function() {
   $('#submit-btn').click(function() {
      var params = $('input, textarea').not("input[type='submit']").serializeArray();
      $.post('/post.php', params).done(function(data) {
        alert(data);
      });
   });
});


Тут сначала обрабатывается клик по кнопке. Далее в переменную params записывается массив из значений полей, используя метод serializeArray(). Далее полученные параметры отправляются в качестве тела запроса. Когда ответ получен, тело ответа просто выводится в модальном окне. Таким образом мы реализовали асинхронный запрос и запись сообщения в БД.

Рассмотрим скрипт, который выводит записи таблицы с сообщениями на страницу (index.html).

$(document).ready(function() {
   $.get('/get.php').done(function(data) {
     data = JSON.parse(data);
     msg_info = data.msg_info;
     status = data.status;
     if (status == 'Success') {
       $.each(msg_info, function(key, object) {
         $.each(object, function(field, value) {
           $('#list').append(field + ':' + value + '<br>');
         });
        $('#list').append('<hr>');
       });
     } else {
       $('#list').append('Fail');
     }
   });
});


Тут, после получения тела ответа, производится приведение JSON строки к объекту. Далее, в зависимости от успеха запроса производится перебор значений - метод each(). Первым аргументом идет массив/объект. Вторым аргументом идет функция которая принимает ключи и значения массива (аналог foreach ($arr as $k => $v) в PHP). Так как у нас msg_info содержит массив из объектов, то для вывода значений каждого объекта необходимо опять применить each(). Далее применяется append() для вставки новых элементов в DOM.

Таким образом мы убедились, что при помощи jQuery отправлять асинхронные запросы легче чем на чистом JS, как и обрабатывать полученные данные.