Автоматическое обновление страницы без перезагрузки

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Помогите мне не много завис что то я на месте.
Есть у меня два файла.
Первый файл подключение к БД в нем же я делаю запрос к этой бд

db.php

 try{
  $db = new PDO("mysql:host=localhost;dbname=db;charset=utf8", "root", "password");
 } catch (PDOException $e){
  print "Error: " . $e->getMessage();
  die();
 }
 $test = $db->query('SELECT * FROM test')->fetch(PDO::FETCH_ASSOC);

и

index.php

<?php require "db.php"; ?>

<div><?php echo $test["test1"]; ?></div>
<div><?php echo $test["test2"]; ?></div>
<div><?php echo $test["test3"]; ?></div>
...
<div><?php echo $test["test10"]; ?></div>

Как возможно сделать автоматическое обновление страницы без перезагрузки при смене данных в БД и что бы это происходило у всех?

#2

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

#3

А что лучше ajax или вебсокеты при условии что бы нагрузка была минимальной и это стоять будет у хостера потом?

#4

Если юзеров не тысячи одновременно, то вряд ли стоит париться.

Веб-сокеты на обычном PHP-хостинге (не VPS и т.п.) скорее всего не получится сделать.

1 лайк
#5

Вот тут то и всё я зашёл в тупик. Допустим у меня есть какое то условие в index.php

if($test["test1"] == "test1"){
// Какое то действие 1
} else if($test["test1"] == "test2"){
// Какое то действие 2
} else if($test["test1"] == "test3"){
// Какое то действие 3
}

При обновление значения в БД как мне обновить $test[“test1”] и выполнить то действие которое нужно?

#6

Ну возвращайте в каком-нибудь виде то, что надо обновить.
Например, такой JSON:

{
  "test1": "html........",
  "test3": "html........"
}
1 лайк
#7

@s88s , Вы, по моему не понимаете главного - где и когда выполняется код на PHP и где и когда будет выполняться AJAX (и что это такое вообще :))

Основы PHP

AJAX для новичков _ Хабр

AJAX Вам придётся реализовывать на стороне клиента (то есть в браузере клиента) в виде JS кода. Можно использовать нативный (“чистый” javascript) код, но, имхо, лучше использовать какую-нибудь библиотеку. Например, универсальная jQuery весьма удобна.

#8

Подскажите с чего Вы это решили. Да возможно … нет даже на верняка я не всё знаю так как учился сам и практики в последнее время было не очень много и что то подзабыл НО азы как то ещё помню.

Я просто не хотел создавать ещё одну страницу и писать дополнительный код который должен обновляться да еще в этот файл писать html разметку … но как я понимаю так или иначе мне без этого не обойтись и придется писать за место двух файлов которые я написал выше ещё один так сказать промежуточный который будет выводить информацию всю на странице.
Пошёл думать теперь как это всё красиво реализовать =)

#9

Вот сейчас у меня используется три файла первый это подключение к БД.
Второй это index.php В этом файле не считая разметок html head и body всего один блок div и ajax, который вызывается каждые 10 секунд ну и конечно php файл откуда берутся данные

<html>
<head> ... </head>
<body>

<div id="test"></div>

<script>

function test(){
 $.ajax({
  type: "POST",
  url:  "test.php",
  data: "test=test",
  success: function(html){
   $("#test").html(html);
  }
 });
}
test();
setInterval(test,10000);

</script>


</body>
</html>

php расписывать не буду. Данный вариант работает автоматическое обновление работает. Но появился вопрос такой. А как сделать автоматическое обновление если использовать tpl шаблоны … с tpl не когда дела не имел

К примеру к меня есть index.php и index.tpl
index.php

<?php
  $username = "Пётр"; //Будем считать что это взято и БД 
  $user_panel = file_get_contents("index.tpl");
  $user_panel = str_replace("{username}", $username, $user_panel);
  echo $user_panel;
?>

index.tpl

<div>
  <p>Здравствуйте, <b>{username}</b>!</p>
</div>

Вот как в этом случае делать автоматическое обновление при помощи ajax?

#10

Так а в чем разница? Вы ж превратили это в готовую HTML строку тут

Внутри так же как и выше можно написать id="test" и т.д.

#11

Правильно я понимаю я создаю три файла первый файл tpl в нём вся разметка
второй это php в нём я делаю всю обработку и подтягиваю в него tpl
и третий это то что я буду выводит уже на экран с ajax?

#12

Да как угодно :man_shrugging:

Этот index.php выше вполне можно переименовать в index.tpl и будет так же работать )

1 лайк
#13

Это зависит полностью от Вас, как от главного проектировщика приложения и от программиста.
Можно и в одном файле всё разместить, можно три или четыре - как запланируете, так и будет.

Вот пример с использованием Вашей схемы (хотя я бы сделал немного по другому - подробнее расскажу ниже)

файл page1.html (расширение файла ЛЮБОЕ, какое ваш сервер скушает и отдаст клиенту (хоть HTML, хоть PHP)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AJAX Simple Example</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>

<body>
<div id="test"></div>
</body>

<script>
function test(){
  $.post( "index1.php", function( data ) {
     $( "#test" ).html( data );
  });
}

test();
setInterval(test,2000);

</script>
</html>

файл index1.php

<?php
  $username = date('Y-m-d H:i:s:ms', time());  // "Пётр"; //Будем считать что это взято и БД 
  $user_panel = file_get_contents("index1.tpl");
  $user_panel = str_replace("{username}", $username, $user_panel);
  echo $user_panel;
?>

файл index1.tpl

<div>
  <p>Здравствуйте, <b>{username}</b>!</p>
</div>

P.S. я бы сделал отдельный PHP файл, который возвращал исключительно ту информацию, которую на странице нужно обновить (нам совсем не нужны все эти элементы разметки, < div >, "Здравствуйте, теги < b > и прочее, если у нас меняется только имя пользователя, например, как в данном примере.
Но для этого, конечно, нужно изменить разметку - тому элементу, который нужно менять, нужно дать какой-нибудь аттрибут, по которому его можно найти в DOM и изменить. Проще всего, конечно, ID
Думаю, что это очевидно и просто, но если есть вопросы - покажу на примере.

#14

Спасибо Вам за помощь.

#15

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

#16

Да так же как и выше в теме.

Для “оффлайн” можно например просто при любом не автоматическом запросе (открытие страницы, отправка сообщения, …) обновлять время последней активности у текущего пользователя. Можно еще JS определять, что пользователь что-то делает, двигает мышку, скроллит, и периодически сообщать серверу.

Я бы не делал это всё без особой необходимости. Зачем лишние сложности. Это точно кому-то нужно?

#17

Мне нужно что бы на лету содержимое обновлялось если оно было изменено

#18

Для чего, какую проблему это решит?

Это ж видимо не чат и т.п.

#19

Первое пытаюсь для себя понять как это вообще реализовывается
Второе для своей работы хочу реализовать что то вроде мини чата для заявок и возможность редактирования