AJAX PHP JQUERY передача POST запроса

Для того, чтобы отправить POST запрос на PHP скрипт посредством AJAX JQUERY, создадим 2 файла:

jqtest.htm – в котором будет форма запроса и javascript код для формирования и отправки запроса;

jqtest.php – для приёма и отсылки ответа.

Листинг файла jqtest.htm:

<div>
<label for="request">Request:  </label>
<input id="request">
<input type="submit" value="Send" onclick="send();">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
  function send()
  {
    jQuery.ajax({
      dataType: "json",
      method: "POST",
      url: "jqtest.php",
      data: { msg: jQuery('#request').val()}
    }).done(function( msg ) {
      alert(msg['answer']);
    });
  }
</script>

Листинг файла jqtest.php:

<?php
$q = ($_POST['msg']);
$ans= array(
  'answer' => 'You send: '.$q,
);
echo json_encode($ans);
?>

JQUERY запрос передаёт ключ msg в формате JSON, а PHP код формирует JSON ответ и возвращает его в ключе answer.

Листинг index.php из видео:


<?php
if(!$_POST["message"]){
// Форма ввода
?>
<!DOCTYPE html>
<html>
<head>
<title>Отправка сообщений - jQuery</title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>

<form onsubmit="Send();return false">
<label for="request">Запрос:</label>
<input id="request" required>
<input type="submit" value="Send">
</form>
<div id="result"></div>

<script>
function Send(){
jQuery.ajax({
dataType: "json",
type: "POST",
url:"//inc1.net/vlog/jquery-test/",
data: {message: jQuery('#request').val()}
}).done(function(msg){
jQuery('#result').text(msg['answer']);
})
}
</script>

</body>
</html>
<?php }else{
// Обработка запроса
$q = $_POST['message'];
$answer = array(
'answer' => 'Принят запрос: '.$q
);
echo json_encode($answer);
}
?>