gunaevart · September 14, 2018 07:31
diff --git a/1.php b/1.php
 <?php
  // если в массиве $_POST есть ключ name и его значение не равно пустоте, то
  if ((isset($_POST['name'])) && (!empty($_POST["name"]))) {
    // присвоить $result['name'] значение $_POST['name']
    $result['name'] = $_POST['name'];
  } else {
    // иначе, $result['name'] присвоить указанную строку
    $result['name'] = 'Вы не ввели поле name!';
  }
  // если в массиве $_POST есть ключ message и его значение не равно пустоте, то  
  if ((isset($_POST['message']))&& (!empty($_POST["message"]))) {
    // присвоить $result['message'] значение $_POST['message']
    $result['message'] = $_POST['message'];
  } else {
    // иначе, $result['message'] присвоить указанную строку
    $result['message'] = 'Вы не ввели поле message!';
  }
  // преобразовать массив $result в json, а затем вывести его с помощью echo
  echo json_encode($result);
 ?>
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>js</title>
 </head>
 <body>
 	<div class="container">
 		<div class="panel panel-danger">
 		  <div class="panel-heading">Данные, которые пришли с сервера:</div>
 		  <!-- Контейнер для вывода результата (id = "result") -->
 		  <div class="panel-body" id="result"></div>
 		</div>
 		<!-- HTML форма, данные которой будем отправлять на сервер по технологии AJAX (id="message") -->
 		<form id="message">
 		  <div class="form-group">
 			<label for="name">Имя:</label>
 			<input type="text" class="form-control" name="name">
 		  </div>
 		  <div class="form-group">
 			<label for="name">Сообщение:</label>
 			<textarea class="form-control" rows="3" name="message"></textarea>
 		  </div>
 		  <button id="send-message" class="btn btn-primary">Отправить сообщение</button>
 		</form>
 	  </div>
 	<script src="index.js"></script>

 </body>
 </html>
diff --git a/js.js b/js.js
 // после загрузки DOM модели
 document.addEventListener('DOMContentLoaded', function() {
    // получим форму с id = "message"
    var message = document.getElementById('message');
    // при возникновении у формы события submit
    message.addEventListener('submit', function(e) {
      // создадим объект FormData и добавим в него данные из формы
      var formData = new FormData(message);
      // создадим объект XHR
      var request = new XMLHttpRequest();
      // инициализирум запрос
      request.open('POST', '1.php');
      // при изменении состояния запроса        
      request.addEventListener('readystatechange', function() {
        // если запрос завершился и код ответа сервера OK (200), то
        if (this.readyState == 4 && this.status == 200) {
          // разбираем строку json, который вернул сервер и помещаем её в переменную data
          var data = JSON.parse(this.responseText);
          // создаём переменную, в которую будем складывать результат работы (маркированный список)
          var output = '<ul>';
          // переберём объект data
          for (var key in data) {
            output += '<li><b>' + key + "</b>: " + data[key] + '</li>';
          }
          // добавим к переменной закрывающий тег ul
          output += '</ul>';
          // выведем в элемент (id = "result") значение переменной output
          document.getElementById('result').innerHTML = output;
        }
      });
      // отправляем запрос на сервер
      request.send(formData);
      // отменяем отправку формы стандартным способом
      e.preventDefault();
    });
  });
	<?php
	// если в массиве $_POST есть ключ name и его значение не равно пустоте, то
	if ((isset($_POST['name'])) && (!empty($_POST["name"]))) {
	// присвоить $result['name'] значение $_POST['name']
	$result['name'] = $_POST['name'];
	} else {
	// иначе, $result['name'] присвоить указанную строку
	$result['name'] = 'Вы не ввели поле name!';
	}
	// если в массиве $_POST есть ключ message и его значение не равно пустоте, то
	if ((isset($_POST['message']))&& (!empty($_POST["message"]))) {
	// присвоить $result['message'] значение $_POST['message']
	$result['message'] = $_POST['message'];
	} else {
	// иначе, $result['message'] присвоить указанную строку
	$result['message'] = 'Вы не ввели поле message!';
	}
	// преобразовать массив $result в json, а затем вывести его с помощью echo
	echo json_encode($result);
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>js</title>
	</head>
	<body>
	<div class="container">
	<div class="panel panel-danger">
	<div class="panel-heading">Данные, которые пришли с сервера:</div>
	<!-- Контейнер для вывода результата (id = "result") -->
	<div class="panel-body" id="result"></div>
	</div>
	<!-- HTML форма, данные которой будем отправлять на сервер по технологии AJAX (id="message") -->
	<form id="message">
	<div class="form-group">
	<label for="name">Имя:</label>
	<input type="text" class="form-control" name="name">
	</div>
	<div class="form-group">
	<label for="name">Сообщение:</label>
	<textarea class="form-control" rows="3" name="message"></textarea>
	</div>
	<button id="send-message" class="btn btn-primary">Отправить сообщение</button>
	</form>
	</div>
	<script src="index.js"></script>

	</body>
	</html>
	// после загрузки DOM модели
	document.addEventListener('DOMContentLoaded', function() {
	// получим форму с id = "message"
	var message = document.getElementById('message');
	// при возникновении у формы события submit
	message.addEventListener('submit', function(e) {
	// создадим объект FormData и добавим в него данные из формы
	var formData = new FormData(message);
	// создадим объект XHR
	var request = new XMLHttpRequest();
	// инициализирум запрос
	request.open('POST', '1.php');
	// при изменении состояния запроса
	request.addEventListener('readystatechange', function() {
	// если запрос завершился и код ответа сервера OK (200), то
	if (this.readyState == 4 && this.status == 200) {
	// разбираем строку json, который вернул сервер и помещаем её в переменную data
	var data = JSON.parse(this.responseText);
	// создаём переменную, в которую будем складывать результат работы (маркированный список)
	var output = '<ul>';
	// переберём объект data
	for (var key in data) {
	output += '<li><b>' + key + "</b>: " + data[key] + '</li>';
	}
	// добавим к переменной закрывающий тег ul
	output += '</ul>';
	// выведем в элемент (id = "result") значение переменной output
	document.getElementById('result').innerHTML = output;
	}
	});
	// отправляем запрос на сервер
	request.send(formData);
	// отменяем отправку формы стандартным способом
	e.preventDefault();
	});
	});