Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
Топик располагается на нескольких страницах: [1] 2 3   вперед  Ctrl      все
 Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Приветствую!

Посоветуйте, пожалуйста, как лучше поступить. Есть страница, которая, в общем, вся формуруется сервером как строка. Т.е. добавить в нее, желательно в конец, что-то не проблема. На странице работает аснхронный таймер. Содержимое страницы, видимое в браузере, исправно обновляется без видимой перезагрузки.

Есть необходимость передать в браузер от сервера данные так, что бы потом можно было с ними работать в JavaScript. Первое, что пришло в голову, это передача данных через ячейку невидимой таблицы. И через document.querySelector проверять в ней данные. Это, конечно, работает но как-то уж очень криво в целом. Кроме того, это требует добавление в документ довольно сложной структуры.

Можно было бы добавить в конец документа описания, например переменных сразу на JS и обновлять их, но думаю, это не сработает без полной перезагрузки страницы. Может, есть вариант добавлять в конец какие-то динамически изменяемые данные в HTML, что бы потом иметь к ним доступ из JS ? Что-то типа <OBJECT> с парами параметр - значение?

Сообщение было отредактировано: 26 окт 21, 11:02
26 окт 21, 11:00    [22388215]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Хм. Кажется, сделал. Через атрибуты данных HTML5 и тот же document.querySelector. Сейчас еще проверю, но пока обновляется...

Сообщение было отредактировано: 26 окт 21, 11:27
26 окт 21, 11:27    [22388228]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Есть страница, которая, в общем, вся формуруется сервером как строка.

Если ты каждый раз формируешь сервером страницу полностью - данные можно записать как часть скрипта JS
<script>
   let data = 'твои данные';
</script>

Но если потом страничка (не перегружаясь) получает новые данные - нужно будет менять и data...
26 окт 21, 11:51    [22388250]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
> Но если потом страничка (не перегружаясь) получает новые данные - нужно будет менять и data...

Данные, которые в data поменять-то можно. Но "подхватит" ли их интерпретатор JS при неполном обновлении страницы?
Что-то у меня пока не получилось ничего по этому пути. Кроме того, появилось подозрение, что даже если это и сработает, мы грубо нарушим оптимизации в вируальной машине при кажом обновлении?

Вот это
<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div>
работает.

Может, есть еще методы?
26 окт 21, 12:05    [22388262]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Хм. Кажется, сделал. Через атрибуты данных

Значит ты таки формируешь страницу полностью каждый раз...
Или ты динамически меняешь значение связанные с атрибутами?

Так можно поступать и с переменными на странице... ДОМ трогать не обязательно.
26 окт 21, 12:10    [22388265]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Данные, которые в data поменять-то можно. Но "подхватит" ли их интерпретатор JS при неполном обновлении страницы?

Смотря что ты понимаешь под интерпретатор JS...

Andi_WEB
Вот это
<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div> 

работает.

Проиллюстрирую...
<script>
   // Тут не видно
</script>
<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div> 
<script>
   let data = 'наши данные'
</script>
<script>
   // Тут видно
</script>
26 окт 21, 12:16    [22388271]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
> Значит ты таки формируешь страницу полностью каждый раз...
Будете смеятся - но трудно сказать. Я WEB в общем не занимаюсь, в основном железками. У системы есть ядро, которое использует в т.ч. AJAX. На странице таймер и элемент TEXT, в который попадает весь код страницы на HTML. Работу этого сервера я себе представлял примерно так - таймер, используя механизм AJAX получает с сервера только "видимое" представление страницы, а JS часть загружается только при первом обращении к странице, и не интерпретируется заново при обновлениях.
26 окт 21, 12:18    [22388273]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Может, есть еще методы?

JS может еще получить данные из УРЛа...
Но далее, если они обновляются без изменения УРЛ, нужно будет самостоятельно отслеживать их изменения.
26 окт 21, 12:18    [22388274]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
используя механизм AJAX получает с сервера ...

Это уже динамическое изменение...

При таком варианте - передать начальные данные можно и статикой. Не в атрибутах, прямо в скрипте.
Когда будешь получать данные подгрузкой (механизм AJAX) находи там нужное и меняй значение переменным (у меня это data).
26 окт 21, 12:21    [22388275]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
А если я просто в конец страницы добавляю по типу

<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div>


с нужними данными, это грозит чем-то нехорошим, как думаете? Проверил, вот так:

const datareturn = document.querySelector('#tcp_cb'); alert(datareturn.dataset.columns);


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

Сообщение было отредактировано: 26 окт 21, 12:27
26 окт 21, 12:25    [22388280]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
А если я просто в конец страницы добавляю по типу

<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div>

с нужними данными, это грозит чем-то нехорошим, как думаете? Проверил, вот так:
const datareturn = document.querySelector('#tcp_cb'); alert(datareturn.dataset.columns);


все вроде извлекается и отображаются текущие данные.

Нехорошего не будет точно.
Просто данные с сервера и не более того.

Главное чтобы они были видны в нужный тебе момент.
А далее остается только их модифицировать при получении свежей партии данных с сервера...
26 окт 21, 12:40    [22388287]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Да, прошу прощения, только сейчас понял, что сразу не совсем ясно задал вопрос. С самого начала речь шла об обновляемых данных, коннчно. Измеряемое значение. Сейчас попробую внедрить обработку в страницу, а не проверять с консоли. Интересно также, будет ли рботать, если при следующем обновлении страницы, скажем, станет не два элемента dataset ( columns и columns1 ), а появится еще columns2...
26 окт 21, 12:44    [22388290]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Интересно также, будет ли рботать, если при следующем обновлении страницы, скажем, станет не два элемента dataset ( columns и columns1 ), а появится еще columns2...

Какие данные передашь - такие и получишь при "обработке".

А пробовал передавать денные именно в скрипте, в переменных JS?
Если это все нужно для скрипта, что будет "крутиться" на странице - не стоит так "далеко" прятать данные...
Вот некая иллюстрация...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
	const datareturn = document.querySelector('#tcp_cb'); 
	alert('Данные из атрибута ' + datareturn.dataset.columns);
	alert('Но они и так видны ' + data.columns);
})
</script>
</head>
<body>
<div id="tcp_cb" data-columns="0,455979254795238" data-columns1="asd"> </div>
<script>
	let data = {
		columns: 0.455979254795238,
		columns1: "asd"
	}
</script>
</body>
</html>
26 окт 21, 12:58    [22388301]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
> А пробовал передавать денные именно в скрипте, в переменных JS?
Пробовал первым делом, не заработало. Потому сделал сначала с таблицей.
Правда, это было вчера и очень поздно, вероятен мощный затуп :-)

Сегодня еще попробую несколько вариантов. Спасибо за советы.
26 окт 21, 13:04    [22388303]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
s62
Member

Откуда: Жуковский
Сообщений: 1506
Andi_WEB
...

Есть необходимость передать в браузер от сервера данные так, что бы потом можно было с ними работать в JavaScript. Первое, что пришло в голову, это передача данных через ячейку невидимой таблицы. И через document.querySelector проверять в ней данные. Это, конечно, работает но как-то уж очень криво в целом. Кроме того, это требует добавление в документ довольно сложной структуры.

Можно было бы добавить в конец документа описания, например переменных сразу на JS и обновлять их, но думаю, это не сработает без полной перезагрузки страницы. Может, есть вариант добавлять в конец какие-то динамически изменяемые данные в HTML, что бы потом иметь к ним доступ из JS ? Что-то типа <OBJECT> с парами параметр - значение?

Объявляешь внутри тега script переменную в javascript (в своей странице) и ей можно присваивать значение и с ним потом работать.

Сообщение было отредактировано: 26 окт 21, 13:11
26 окт 21, 13:08    [22388306]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
> Объявляешь внутри тега script переменную в javascript (в своей странице) и ей можно присваивать значение и с ним потом работать.

Да, в случае статики это наверное было бы выходом. Но, во-первых, у меня это почему-то пока вообще не заработало. Переменная Undefined и все тут. А у меня ведь эта переменная (или переменные) будут обновлятся несколько раз в секунду. Не сойдет ли с ума интерпретатор JS в браузере?

Пока склоняюсь к мысли, что "корежить" понемногу DOM более безопасно, а через атрибуты данных HTML5 наверное так и вообще самое оно.
26 окт 21, 13:46    [22388334]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
А у меня ведь эта переменная (или переменные) будут обновлятся несколько раз в секунду. Не сойдет ли с ума интерпретатор JS в браузере?

Нет, не переживай за это...
26 окт 21, 13:58    [22388340]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
s62
Member

Откуда: Жуковский
Сообщений: 1506
del

Сообщение было отредактировано: 26 окт 21, 14:24
26 окт 21, 14:17    [22388348]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Andi_WEB
Интересно также, будет ли работать, если при следующем обновлении страницы, скажем, станет не два элемента dataset ( columns и columns1 ), а появится еще и columns2...


Проверил - работает. Как на увеличение, так и в сторону уменьшения числа элементов datadset. Т.е. это довольно удобно в моем случае, можно динамически изменять не только сами переменные, но и их колличестсво. Не нужно в данном случае городить что-то вроде сериализации, JSON строки например, а можно работать с парами параметр - значение.
26 окт 21, 15:20    [22388380]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
Andi_WEB
Не нужно в данном случае городить что-то вроде сериализации, JSON строки например, а можно работать с парами параметр - значение.

Я выше показал тебе альтернативу с объектом JS... ;)
26 окт 21, 15:35    [22388393]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
Andi_WEB
Не сойдет ли с ума интерпретатор JS в браузере?
ну в нынешни
Andi_WEB
Есть страница, которая, в общем, вся формуруется сервером как строка.
любая страница - это строка.
Andi_WEB
Первое, что пришло в голову, это передача данных через ячейку невидимой таблицы.
бредовя идея
Andi_WEB
Через атрибуты данных HTML5
тоже бред
Andi_WEB
при неполном обновлении страницы?
это что за бредятина?
Andi_WEB
Работу этого сервера я себе представлял примерно так - таймер, используя механизм AJAX получает с сервера только "видимое" представление страницы,
еще бред.
кто мешает загрузить страницу один раз, а далее загружать по ajax только данные в той или иной форме?
получили данные обработали, отобразили в нужном вид.
и не надо обновлять всю страницу. обновляется только сам объект отображения - таблица, график...для сервера меньше работы
как вариант - объект отображения - тоже строка - можно формировать на сервере, передавать в браузер в виде готовой html-строки и просто вставлять в dom.
26 окт 21, 18:26    [22388446]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Так... переменные передаются. Теперь настало время сделать что бы можно было отлавливать их изменение. Но не делать же это по таймеру! Погуглив, пришел к вот такой вот конструкции:

var timerId;
var Values_div = document.getElementById('tcp_cb');
var observer;

function Check_Values (mutations) {  
  var  Dataset_Values= mutations[0].target;
  alert(Dataset_Values.dataset.columns); // Выводим обновленное значение первой переменной
  alert(Dataset_Values.dataset.columns1); // Выводим обновленное значение второй переменной 
  Dataset_Values.dispatchEvent(event);
}

function Init_Observer() // Инициализация "наблюдателя" за изменениями
{
 Values_div = document.getElementById('tcp_cb');
 observer = new MutationObserver(Check_Values);
 observer.observe(Values_div, {attributes: true, attributeOldValue: true});   
}

function Create_Timer() 
{
 timerId=window.setInterval(Proxy_Function, 200); // Вызываем вспомогательную функцию
}

function Proxy_Function() 
{
 Init_Observer();
 window.clearInterval(timerId); // Останавливаем таймер
}

document.addEventListener("DOMContentLoaded", Create_Timer);


Но пришел не сразу, а постепенно. Все попытки запустить этот механизм без вспомогательный функций оканчивались ошибкой -
"Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'."
Как будто что-то не проинициализированно (несмотря ня запуск после DOMContentLoaded), но что? Изучать JS конечно надо, будем стараться. Но все же - как можно отрефакторить этот кусок кода? Думаю, тут дело не в положительном влиянии задержки, что-то неверно в общем.

И можно ли как-то автоматически отследить, какая именно переменная была изменена? Процедурно это конечно сделать несложно, но может есть более изящное решение? Вот оно, хранилище данных: <div id="tcp_cb" data-columns="127" data-columns1="128" data-columns2="129"> </div>

Сообщение было отредактировано: 26 окт 21, 22:07
26 окт 21, 22:07    [22388522]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
Andi_WEB
Member

Откуда:
Сообщений: 70
Да, вот это конечно лишнее: Dataset_Values.dispatchEvent(event);
А var Dataset_Values лучше вынести из функции.
26 окт 21, 22:23    [22388526]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
Andi_WEB,

у тебя данные приходят по ajax?
что значит переменные передаются?
откуда передаются? каким образом передаются?

зачем такие сложности?
27 окт 21, 06:46    [22388562]     Ответить | Цитировать Сообщить модератору
 Re: Посоветуйте как передать данные в обновляемую страницу HTML  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
Andi_WEB
Так... переменные передаются
а сам факт передачи - ни есть из изменение?
почему по факту передачи не запускать их обработку ?
27 окт 21, 06:49    [22388563]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: [1] 2 3   вперед  Ctrl      все
Все форумы / HTML, JavaScript, VBScript, CSS Ответить