itProger Видеокурсы Изучение технологии Ajax #4 - Полный контроль над данными

#4 - Полный контроль над данными

За урок мы изучим базовое обращение с технологией Ajax. Мы создадим PHP страницу, на которую выполним асинхронный запрос и в качестве результата нами будет получена строка из PHP файла.

Видеоурок

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Создание формы

Создайте форму как показано на фото ниже:

При нажатии на кнопку «Отобразить» получайте данные из текстового поля и передавайте их на сервер.

На сервере данные должны приниматься и возвращаться обратно.

После получения данных выведите их на экран.

Посмотреть ответ

Создайте HTML разметку:

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
	<form>
		<input type="text" placeholder="Имя"><br>
		<button id="send">Отобразить</button>
		<div id="information"></div>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
	function funcSuccess(data) {
		$("#information").text(data)
	}

	$("#send").bind("click", function () {
		var input = $("form input").val(); // Получаем данные из формы
		$.ajax ({
			url: "content.php",
			type: "POST",
			data: ({input: input}), // Передаем данные
			dataType: "html",
			success: funcSuccess // Функция что сработает после получения данных
		});
	});
	</script>
</body>
</html>

На странице сервера пропишите следующее:

<?php
	echo $_POST['input'];
?>

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

jQuery

PHP

Ajax