Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
index.php - это главная страница, на которой размещена сама форма
ajax.js - это файл javascript, в котором содержится алгоритм ajax для обработки формы
action_ajax_form.php - это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON
Создайте первый файл под названием index.php с таким содержимым:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article FRUCTCODE.COM. How to send html-form with Ajax.</title>
<meta name="description" content="Article FRUCTCODE.COM. How to send ajax form.">
<meta name="author" content="fructcode.com">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form method="post" id="ajax_form" action="" >
<input type="text" name="name" placeholder="NAME" /><br>
<input type="text" name="phonenumber" placeholder="YOUR PHONE" /><br>
<input type="button" id="btn" value="Отправить" />
</form>
<br>
<div id="result_form"></div>
</body>
</html>
Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.
Обратите внимание, что метод отправки формы у нас POST, задан id="ajax_form" и action="". Также, после формы мы добавили div c id=result_form. Именно в этот div мы будем выводить результат обработки формы.
Теперь создадим второй файл - ajax.js
/* Article FructCode.com */
$( document ).ready(function() {
$("#btn").click(
function(){
sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php');
return false;
}
);
});
function sendAjaxForm(result_form, ajax_form, url) {
$.ajax({
url: url, //url страницы (action_ajax_form.php)
type: "POST", //метод отправки
dataType: "html", //формат данных
data: $("#"+ajax_form).serialize(), // Сеарилизуем объект
success: function(response) { //Данные отправлены успешно
result = $.parseJSON(response);
$('#result_form').html('Имя: '+result.name+'<br>Телефон: '+result.phonenumber);
},
error: function(response) { // Данные не отправлены
$('#result_form').html('Ошибка. Данные не отправлены.');
}
});
}В файле ajax.js есть два метода: $("#btn").click и sendAjaxForm. Первый метод - это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку "Отправить", слушатель срабатывает и вызывает метод sendAjaxForm.
В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form - это div в который будут рендерится данные, ajax_form - это id формы отправки сообщения и url - это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).
Создадим последний файл - action_ajax_form.php
<?php
if (isset($_POST["name"]) && isset($_POST["phonenumber"]) ) {
// Формируем массив для JSON ответа
$result = array(
'name' => $_POST["name"],
'phonenumber' => $_POST["phonenumber"]
);
// Переводим массив в JSON
echo json_encode($result);
}
?>
action_ajax_form.php - это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.