Создаём гостевую с AJAX

Создадим гостевую для общения с AJAX, используя ещё MySQL.

База данных
Нам нужна база данных, назовём её messages.
Вот структура:
id - идентификатор
name - имя отправителя
message - сообщение.
Создадим форму на нашей странице:

  1. <form method="post" >
  2.     <center>
  3.      <input id='name' type="text" placeholder="Имя" required>
  4.          <input id='content' type="text" placeholder="Сообщение" required>
  5.         <br/>
  6.         <input id="send" type='button'  value='Отправить'>
  7.     </center>
  8.  </form>

Будет поле для заполнения: имени, текста сообщения. И ещё кнопка для отправки. Обратите внимание что кнопка не SUBMIT!
Как я уже сказала, мы используем AJAX из библиотеки jQuery. Подключим библиотеку:
  1. <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

Для начала в js напишем обработчик кнопки отправки:
  1. $("#send").click(function() {
  2.     //Тут отсылаем обработчику команды с типом send
  3.     $.ajax({
  4.         type: 'POST',
  5.         url: 'master.php' ,
  6.         data: 'type=send&name=' + $('#name').val() + '&mes=' + $('#content').val(),
  7.         success: function(data) {
  8.             getContent(); //Обновим сообщения (вдруг получим сообщения)
  9.             $('#content').val(""); //очищаем поле с текстом
  10.         }
  11.     });
  12. );

Файлом обработчиком master.php займемся позже! Напишем метод получения сообщений:
  1. function getContent(){
  2.     // Кидаем тип обработки getContent
  3.     $.ajax({
  4.         type: 'POST',
  5.         url: 'master.php' ,
  6.         data: 'type=getContent',
  7.         success: function(data){
  8.             $('.messages').html(data); //Полученые данные заносим в нужное место
  9.         }
  10.     });
  11. }

Нам нужно каждые 400 мс вызывать метод getContent. Сделаем:
  1. setInterval(getContent,400)

На первой странице хватит, вот весь код:
  1. <html>
  2. <head>
  3.     <title>Гостевая</title>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <h2>Отправить сообщение:</h2>
  8.     <form method="post">
  9.         <center>
  10.             <input id='name' type="text" placeholder="Имя" required>
  11.             <input id='content' type="text" placeholder="Сообщение" required>
  12.             <br/>
  13.             <input id="send" type='button' class="submit" value='Отправить'>
  14.         </center>
  15.     </form>
  16.     <div class="messages"></div>
  17.     <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  18.     <script>
  19.         $("#send").click(function() {
  20.             $.ajax({
  21.                 type: 'POST',
  22.                 url: 'master.php',
  23.                 data: 'type=send&name=' + $('#name').val() + '&mes=' + $('#content').val(),
  24.                 success: function(data) {
  25.                     getContent();
  26.                     $('#content').val("");
  27.                 }
  28.             });
  29.         });
  30.  
  31.         function getContent() {
  32.             $.ajax({
  33.                 type: 'POST',
  34.                 url: 'master.php',
  35.                 data: 'type=getContent',
  36.                 success: function(data) {
  37.                     $('.messages').html(data);
  38.                 }
  39.             });
  40.         }
  41.  
  42.         setInterval(getContent, 400);
  43.     </script>
  44. </body>
  45. </html>

Вот весь код обработчика master.php:
  1. <?php
  2. $name = $_POST['name']; //Получаем переданные данные
  3. $mess = $_POST['mes']; // И тут
  4.  
  5. if ($_POST['type'] == "send") {
  6.     //Это если мы отправляем сообщение
  7.     if(trim($mess)){
  8.         $mysqli = new mysqli("localhost","root","","mybase");
  9.         $mysqli->query("INSERT INTO `messages` (`name`,`message`) VALUES (' ".$name." ',' ".$mess." ')");
  10.         $mysqli->close();
  11.     }
  12. }
  13.  
  14. if($_POST['type'] == "getContent"){
  15.     //Это получение сообщений
  16.     $mysqli = new mysqli("localhost","root","","mybase");
  17.     $res = $mysqli->query("SELECT `name`,`message` FROM `messages` ORDER BY `id` DESC"); //Сортировка идет по убыванию ID, т.е. самое последнее сообщение наверху
  18.  
  19.     $msgs = ""; // переменная с будущим содержанием
  20.  
  21.     while (($row = $res->fetch_assoc()) != false) {
  22.         $msgs.="<div>".$row['name']."<br/><span>".$row['message']."</span></div><br/>"."<hr>"; //получаем все
  23.     }
  24.     $mysqli->close();
  25.     echo $msgs; // И возвращаем результат
  26. }
  27. ?>

  19.01.24 / 21:10 | AJAX |   63 | 0   0