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

Question

Павел Ефимов @neon3

электромеханик по автоматизации

AJAX

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

Имеется html страница которая подключает php файл graph.php

где создается график. Html страница обновляет с помощью . Как можно обновить график без обновления всей страницы. Слышал про Ajax, но получалось обновлять только текстовые данные.

Вопрос задан более трёх лет назад
225 просмотров

10 комментариев

Подписаться 1 Средний 10 комментариев

origami1024 @origami1024

Подробнее расскажи, php файл у тебя на выходе файл png или jpg выдает или создает/копирует картинку в другое место?

Написано более трёх лет назад
Moses Fender @mosesfender
Аякса тут не причём. Обновляйте src картинки просто.
let intrvl = setInterval(function () { document.querySelector('img#img').setAttribute('src', 'graph.php']); }, 1000);
Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса

origami1024,
?php
require ('gChart.php');
$pie3dChart = new gPie3DChart();
$pie3dChart->addDataSet(array(rand (5,180),66,90));

$pie3dChart->setLabels(array("first", "second", "third"));
$pie3dChart->setColors(array("ff3344", "11ff11", "22aacc"));
$pie3dChart->renderImage($_GET['post']);
?

Написано более трёх лет назад
origami1024 @origami1024

Павел Ефимов, у тебя изначально src=graph.php на картинке стоит?

Написано более трёх лет назад

Павел Ефимов @neon3 Автор вопроса

origami1024,

<html>
<head>
<meta http-equiv="Refresh" content="1" />
<title>graphic</title>
</head>
<body>
<p>
<img src="index.php" />
</p>

</body>
</html>

Написано более трёх лет назад

origami1024 @origami1024
И что если на клике кнопки, например, поставить (как я в ответах предложил)
document.getElementById("myImg").src = "graph.php";

не меняет?
Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса

origami1024, работает

Написано более трёх лет назад
origami1024 @origami1024

Павел Ефимов, не сработает, пробуй ответы, они должны оба сработать

Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса
origami1024, Остановился пока на таком варианте, без Math.random изображение видимо бралось из кэша и фактически не обновлялось
<html> <head> <title>script</title> </head> <body> <div id="img_reload"> <img src="index.php" /> </div> <script> setInterval(function(){ var img_tag = '<img src="index.php?img' +Math.random(0,100)+ '" />'; document.getElementById('img_reload').innerHTML = img_tag},800); </script> </body> </html>
Написано более трёх лет назад
origami1024 @origami1024

без Math.random изображение видимо бралось из кэша и фактически не обновлялось

да, так и есть, второе решение тоже правильное, у меня лаконичнее написано, но по сути добавлять timestamp более правильно, так как в Math.random есть маленькая вероятность, что random совпадет

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

MODX

+2 ещё

Сложный
Как сделать отложенную загрузку сниппета?
- 1 подписчик
- 28 нояб.
- 72 просмотра
2

ответа
PHP

+1 ещё

Простой
Как вывести на сайт что я печатаю сообщение из телеграмм?
- 1 подписчик
- 04 нояб.
- 128 просмотров
1

ответ
WooСommerce

+1 ещё

Сложный
Как заставить woocommerce_update_order_review_fragments передавать верную информацию?
- 1 подписчик
- 18 окт.
- 50 просмотров
2

ответа
PHP

+4 ещё

Простой
Как с удаленного сервера отправить запрос на POS терминал?
- 1 подписчик
- 14 окт.
- 170 просмотров
3

ответа
JavaScript

+1 ещё

Простой
Как правильно передать строку из js в php при помощи ajax?
- 1 подписчик
- 09 окт.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как вызвать выполнение функции JS в drupal 10 через ajax?
- 1 подписчик
- 29 сент.
- 92 просмотра
3

ответа
JavaScript

+2 ещё

Простой
Как прочитать данные, переданные с помощью JQuery AJAX на стороне сервера?
- 1 подписчик
- 28 сент.
- 119 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как по ajax поменять название кнопки?
- 2 подписчика
- 10 сент.
- 570 просмотров
3

ответа
PHP

+2 ещё

Простой
Как решить проблему с дублированием при ajax?
- 1 подписчик
- 10 сент.
- 95 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как отправить drupal ajax?
- 2 подписчика
- 09 сент.
- 114 просмотров
1

ответ
Показать ещё Загружается…

DevOps - инженер

Банк «Урал ФД» • Москва

от 300 000 до 350 000 ₽

Middle fullstack developer (NodeJS)

Тетрика • Москва

До 180 000 ₽

Backend-Developer GO/Golang

Тетрика • Москва

от 200 000 до 300 000 ₽

Сортировка товаров в каталоге на Битрикс

18 дек. 2024, в 16:42

2000 руб./за проект

Разработка ПК игры

18 дек. 2024, в 16:33

2000 руб./в час

Внести изменения на сайт Битрикс

18 дек. 2024, в 16:06

5000 руб./за проект

Подробнее расскажи, php файл у тебя на выходе файл png или jpg выдает или создает/копирует картинку в другое место?
Аякса тут не причём. Обновляйте src картинки просто.
let intrvl = setInterval(function () { document.querySelector('img#img').setAttribute('src', 'graph.php']); }, 1000);
origami1024,
?php
require ('gChart.php');
$pie3dChart = new gPie3DChart();
$pie3dChart->addDataSet(array(rand (5,180),66,90));

$pie3dChart->setLabels(array("first", "second", "third"));
$pie3dChart->setColors(array("ff3344", "11ff11", "22aacc"));
$pie3dChart->renderImage($_GET['post']);
?
Павел Ефимов, у тебя изначально src=graph.php на картинке стоит?
origami1024,
<html> <head> <meta http-equiv="Refresh" content="1" /> <title>graphic</title> </head> <body> <p> <img src="index.php" /> </p> </body> </html>
И что если на клике кнопки, например, поставить (как я в ответах предложил)
document.getElementById("myImg").src = "graph.php";

не меняет?
Павел Ефимов, не сработает, пробуй ответы, они должны оба сработать
origami1024, Остановился пока на таком варианте, без Math.random изображение видимо бралось из кэша и фактически не обновлялось
<html> <head> <title>script</title> </head> <body> <div id="img_reload"> <img src="index.php" /> </div> <script> setInterval(function(){ var img_tag = '<img src="index.php?img' +Math.random(0,100)+ '" />'; document.getElementById('img_reload').innerHTML = img_tag},800); </script> </body> </html>
без Math.random изображение видимо бралось из кэша и фактически не обновлялось

да, так и есть, второе решение тоже правильное, у меня лаконичнее написано, но по сути добавлять timestamp более правильно, так как в Math.random есть маленькая вероятность, что random совпадет

Answer 1 · 2019-03-04 18:17:47

origami1024 @origami1024

went out for a night walk

document.querySelector("img").src = 'img.php?' + Math.random()

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2019-03-04 18:26:20

setInterval(()=>{document.getElementById("myImg").src=document.getElementById("myImg").src.split("?")[0]+"?_="+(new Date()).getTime());},1000);

Я бы добавил метку времени чтобы браузер понимал что нужно именно заного скачать файл а не взять его из кэша.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт