Как обновить div без перезагрузки страницы?

Question

[iddimon3]

Нужно обновлять один блок, но не затрагивая остальные, без перезагрузки страницы.
вот пример кода:

<div id="block"><? echo time(); ?></div>

<script>setInterval(
setInterval(function(){

    // Тут обновлять block

}, 30000);
</script>

Answer 1

[Алексей Ярков]

block.innerHTML = Date.now();

Comments

[iddimon3]

Не совсем это имел введу, нужно чтобы исполнялся код в div, а так вы просто присваивайте новый код только в виде js я так привёл пример, мне нужно будет обновлять таблицу.
Нужно с помощью js как то обновить этот div, чтобы в нём исполнился уже существующий код.

[Алексей Ярков]

iddimon3, без вариантов. Только iframe.

Answer 2

[キム ファイブプラス]

Чего? Кого? Что загружать? Где исполнять? JS? PHP? Ничего не понятно.
Если про PHP речь, то можно запросить с бэка скрипт фетчем, получить результат и подставить в контейнер.
И так бесконечное количество раз.

Answer 3

[Надим]

Простой вариант:

<div id="block"><? echo time(); ?></div>

<script>
	
	(async function() {
		
		var selector = '#block'; // Селектор блока, который надо обновлять
		
		while (true) {
			
			await new Promise(function(s) { setTimeout(s, 30*1000); }); // Каждые 30 сек.
			
			try {
				var html = await (await fetch(location.href)).text();
				var newdoc = new DOMParser().parseFromString(html, 'text/html');
				document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
				console.log('Элемент '+selector+' был успешно обновлен');
			} catch(err) {
				console.error('При обновлении элемента '+selector+' произошла ошибка:', err);
			}
			
		}
		
	})();
	
</script>

Comments

[maratmd]

Хорошее решение, а как сделать перезагрузку по клику на кнопку?

[Надим]

maratmd, скорми код чат гпт и попроси изменить так как хочешь.

Answer 4

[AUser0]

Самое простое - сделать рядом скрытый <div>, и в него напихать всё содержимое. В нужный момент скрываем первый <div> и материализуем второй. Ну или перемещаем содержимое из второго в первый.

Либо использовать AJAX для получения содержимого с сервера.

Answer 5

[pvlbgtrv]

<div id="block"><? echo time(); ?></div>

<script>
setInterval(function(){

    var block = document.getElementById('block');
    block.innerHTML = 'тут новый контент';

}, 30000);
</script>