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


В этом уроке мы отправим данные контактной формы при помощи технологии AJAX, запишем их в базу данных. Также (при помощи AJAX) отобразим все существующие данные на отдельной странице.

Для начала сделаем две странички - index.html для отображения списка сообщений и form.html для отображения формы. Приведем исходный код формы:
<div id="form">
<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"/>
</div>

Как видим сам тег формы не обязателен, т.к. отправка запроса будет осуществляться "вручную".

Для создадим PHP скрипт, который запишет данные из массива $_POST в базу данных (файл post.php):

try {
   $dbh = new PDO('mysql: host=localhost; dbname=my_db', 'root', '');
   $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sth = $dbh->prepare('INSERT INTO tbl_message (name, email, phone, message) VALUES (:name, :email, :phone, :message)');
    $sth->execute($_POST);
} catch (PDOException $e) {
   $status = 'Fail: ' . $e->getMessage();
}


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

function updateDB(obj)
{
   var children = obj.children;
   var params = [];
   for (var i=0; i < children.length - 1; i++) {
      params.push(children[i].name + '=' + children[i].value);
   }
   params = params.join('&');
   request.open('POST', '/post.php', true);
   request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   request.send(params);
}


Эта функция принимает объект и формирует массив из значений полей его дочерних элементов. Далее эти значения склеиваются в строку, которая будет передана в качестве тела POST запроса (параметры). Обратите внимание, что также передается специальный заголовок Content-type. Это надо для того, чтобы в рамках PHP был сформирован $_POST массив. Иначе, тело запроса будет доступно лишь из переменной $HTTP_RAW_POST_DATA.

Теперь поместим обработку события клика по кнопке в элемент кнопки.
<input type="button" id="submit-btn" value="Go" onclick="updateDB(document.getElementById('form'));"/>

Оставшийся код скрипта - это создание объекта XMLHttpRequest и обработка изменения его состояния. Это делалось и в предыдущих уроках.

Оформим теперь список сообщений. Нам необходим PHP скрипт для получения списка сообщений:

try {
   $dbh = new PDO('mysql: host=localhost; dbname=my_db', 'root', '');
   $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   $sth = $dbh->query('SELECT * FROM tbl_message');
   $msg_info = $sth->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
   $status = 'Fail: ' . $e->getMessage();
}


Остается добавить на страницу index.html JS скрипт, который отправит запрос к скрипту get.php

responseBody = request.responseText;
data = JSON.parse(responseBody);
console.log(data);
for (i = 0; i < data['msg_info'].length; i++) {
   if (data['status'] == 'Success') {
      for (key in data['msg_info'][i]) {
         block.innerHTML += key + ': ';
         block.innerHTML += data['msg_info'][i][key];
         block.innerHTML += '<br/>';
      }
   } else {
      block.innerHTML += data['status'];
   }
   block.innerHTML += '<hr/>';
}


Тут мы принимаем строку в формате JSON и извлекаем из нее данные. Далее циклом перебираем массивы с сообщениями и добавляем эту информацию в блок #list. В случае ошибки будет добавлена строка fail.