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

2 years ago | 84.5K

Что такое 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 и в этой...
15.8K

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

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

Что такое Modern Javascript?

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

Классы в JAVASCRIPT

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

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

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

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

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























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

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

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

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

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

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

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

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

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

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