Как отправить HTML-форму без перезагрузки страницы

4 years ago | 173.7K

Что такое AJAX

При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.

 

ajax form jquery php fructcode

 

Технология 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.

 

интерактивный курс modern javascript


В метод 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, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.



Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
12.0K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
17.6K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
10.0K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
13.1K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
26.2K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
74.1K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Новинка!
  • 115 заданий
  • 34 видео
  • 9 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Сергей Никонов
  • Новинка!
  • 30 заданий
  • 16 видео
  • 2 часа

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1589
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 636
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1087
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1371
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2403
Сергей Никонов
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4718
Сергей Никонов
  • 66 заданий
  • 32 видео
  • 5 часов