Latest posts on Вывод данных в формате JSON получаемых от сервера Flask topichttps://python.su/forum/topic/38557/2020-03-10T23:37:21+02:00Веб-технологии :: Web :: Вывод данных в формате JSON получаемых от сервера Flask
2020-03-10T23:37:21+02:00Alex_2057208132Проверил. Спасибо, работает под общим <div><br/><br/>Что касается обновления через 2 секунды.<br/>Сейчас этот запрос формирует:<br/>setInterval(function()<br/> {<br/> // запрос со страницы сайта к серверу:<br/> $('#data').load(document.URL + ‘ #data’);<br/> }, 2000) // период запроса<br/>И обновление работает.<br/><br/>Но во втором вопросе, если оставить:<br/>setInterval(update_values, 2000);<br/>function update_values() {<br/> $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};<br/> $.getJSON($SCRIPT_ROOT+“/<name>”,<br/> function(data) {<br/> $(“#sensor_1”).text(data.sensor_1+“ %”)<br/> $(“#sensor_2”).text(data.sensor_2+“ %”)<br/> $(“#sensor_3”).text(data.sensor_3+“ %”)<br/> });<br/> }<br/>Функция выполнится только один раз при первой загрузке (обновлении) страницы. <br/>Данные выведутся один раз, затем запросы к серверу пойдут,<br/>но данные уже обновляться не будут.
Веб-технологии :: Web :: Вывод данных в формате JSON получаемых от сервера Flask
2020-03-10T21:50:42+02:00Romissevd208130А если запихнуть под общий div?<br/><div class="code"><pre> <span class="p"><</span><span class="nt">html</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src </span><span class="o">=</span> <span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></span>
<span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span>
<span class="p">{</span>
<span class="c1">// запрос со страницы сайта к серверу:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#data'</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">URL</span> <span class="o">+</span> <span class="s1">' #data'</span><span class="p">);</span>
<span class="c1">// если откомментарить эту строку, то будет еще один запрос к серверу</span>
<span class="c1">// $('#data_sensor_3').load(document.URL + ' #data_sensor_3');</span>
<span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> <span class="c1">// период запроса</span>
<span class="c1">// не работает (?) - нет запроса к серверу:</span>
<span class="c1">//setInterval(update_values, 2000);</span>
<span class="kd">function</span> <span class="nx">update_values</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$SCRIPT_ROOT</span> <span class="o">=</span> <span class="p">{{</span> <span class="nx">request</span><span class="p">.</span><span class="nx">script_root</span><span class="o">|</span><span class="nx">tojson</span><span class="o">|</span><span class="nx">safe</span> <span class="p">}};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">$SCRIPT_ROOT</span><span class="o">+</span><span class="s2">"/<name>"</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_1"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_1</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_2"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_2</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_3"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_3</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">h3</span><span class="p">></span>Тест датчиков автоматики (port: 88)<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'data'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'data_sensor_1'</span><span class="p">></span>Sensor 1: {{ sensor_1.sensor_1}}<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">id</span><span class="err">='</span><span class="na">data_sensor_2</span><span class="err">'</span><span class="p">></span>Sensor 2: {{ sensor_2.sensor_2}}
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
Sensor OK!<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'data_sensor_3'</span><span class="p">></span>Sensor 3: {{ sensor_3.sensor_3}}<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>Sensor N:<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
</pre></div>И кстати код работает. Каждые 2 секунды данные в браузере обновляются…
Веб-технологии :: Web :: Вывод данных в формате JSON получаемых от сервера Flask
2020-03-10T16:17:38+02:00Alex_2057208116Здравствуйте!<br/>Есть серверная часть (web-сервер на микрофреймворке Flask).<br/>Собирает данные от датчиков. <br/>В примере эти запросов от датчиков заменены на вывод переменных изменяющихся во времени.<br/><br/><div class="code"><pre> <span class="ch">#!/usr/bin/env python</span>
<span class="kn">import</span> <span class="nn">RPi.GPIO</span> <span class="kn">as</span> <span class="nn">GPIO</span>
<span class="kn">import</span> <span class="nn">random</span>
<span class="kn">import</span> <span class="nn">datetime</span>
<span class="kn">import</span> <span class="nn">time</span>
<span class="kn">from</span> <span class="nn">time</span> <span class="kn">import</span> <span class="n">sleep</span>
<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">jsonify</span><span class="p">,</span> <span class="n">render_template</span>
<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="o">*</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
<span class="nd">@app.route</span><span class="p">(</span><span class="s1">'/<name>'</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span> <span class="p">[</span><span class="s1">'GET'</span><span class="p">])</span>
<span class="k">def</span> <span class="nf">main</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="bp">None</span><span class="p">):</span> <span class="c1"># </span>
<span class="c1"># получение данных от датчиков:</span>
<span class="c1"># sensor_1 = get_data_1()</span>
<span class="c1"># sensor_2 = get_data_2()</span>
<span class="c1"># sensor_3 = get_data_3()</span>
<span class="c1"># для примера, вместо датчиков - периодически изменяющиеся переменные:</span>
<span class="n">sensor_1</span> <span class="o">=</span> <span class="nb">round</span><span class="p">(</span><span class="n">random</span><span class="o">.</span><span class="n">random</span><span class="p">(),</span><span class="mi">5</span><span class="p">)</span>
<span class="n">sensor_2</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">1000</span><span class="p">)</span>
<span class="n">sensor_3</span> <span class="o">=</span> <span class="n">datetime</span><span class="o">.</span><span class="n">datetime</span><span class="o">.</span><span class="n">now</span><span class="p">()</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="k">print</span> <span class="p">(</span><span class="s2">"Sensor 1:"</span><span class="p">,</span> <span class="n">sensor_1</span><span class="p">)</span>
<span class="k">print</span> <span class="p">(</span><span class="s2">"Sensor 2:"</span><span class="p">,</span> <span class="n">sensor_2</span><span class="p">)</span>
<span class="k">print</span> <span class="p">(</span><span class="s2">"Sensor 3:"</span><span class="p">,</span> <span class="n">sensor_3</span><span class="p">)</span>
<span class="n">sensor_1</span> <span class="o">=</span> <span class="p">{</span><span class="s1">'sensor_1'</span><span class="p">:</span> <span class="n">sensor_1</span><span class="p">}</span>
<span class="n">sensor_2</span> <span class="o">=</span> <span class="p">{</span><span class="s1">'sensor_2'</span><span class="p">:</span> <span class="n">sensor_2</span><span class="p">}</span>
<span class="n">sensor_3</span> <span class="o">=</span> <span class="p">{</span><span class="s1">'sensor_3'</span><span class="p">:</span> <span class="n">sensor_3</span><span class="p">}</span>
<span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s2">"index.html"</span><span class="p">,</span> <span class="n">sensor_1</span><span class="o">=</span><span class="n">sensor_1</span><span class="p">,</span> <span class="n">sensor_2</span><span class="o">=</span><span class="n">sensor_2</span><span class="p">,</span> <span class="n">sensor_3</span><span class="o">=</span><span class="n">sensor_3</span><span class="p">)</span>
<span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">"__main__"</span><span class="p">:</span>
<span class="n">app</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="n">host</span><span class="o">=</span><span class="s1">'0.0.0.0'</span><span class="p">,</span> <span class="n">port</span><span class="o">=</span><span class="mi">88</span><span class="p">,</span> <span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>
</pre></div><br/>Из браузера к серверу идет запрос. Вывод данных без обновления страницы.<br/><div class="code"><pre> <span class="p"><</span><span class="nt">html</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src </span><span class="o">=</span> <span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></span>
<span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span>
<span class="p">{</span>
<span class="c1">// запрос со страницы сайта к серверу: </span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#data_sensor_1'</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">URL</span> <span class="o">+</span> <span class="s1">' #data_sensor_1'</span><span class="p">);</span>
<span class="c1">// если откомментарить эту строку, то будет еще один запрос к серверу </span>
<span class="c1">// $('#data_sensor_3').load(document.URL + ' #data_sensor_3');</span>
<span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> <span class="c1">// период запроса</span>
<span class="c1">// не работает (?) - нет запроса к серверу:</span>
<span class="c1">//setInterval(update_values, 2000);</span>
<span class="kd">function</span> <span class="nx">update_values</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$SCRIPT_ROOT</span> <span class="o">=</span> <span class="p">{{</span> <span class="nx">request</span><span class="p">.</span><span class="nx">script_root</span><span class="o">|</span><span class="nx">tojson</span><span class="o">|</span><span class="nx">safe</span> <span class="p">}};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">$SCRIPT_ROOT</span><span class="o">+</span><span class="s2">"/<name>"</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_1"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_1</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_2"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_2</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#sensor_3"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sensor_3</span><span class="o">+</span><span class="s2">" %"</span><span class="p">)</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">h3</span><span class="p">></span>Тест датчиков автоматики (port: 88)<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'data_sensor_1'</span><span class="p">></span>Sensor 1: {{ sensor_1.sensor_1}}<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">id</span><span class="err">='</span><span class="na">data_sensor_2</span><span class="err">'</span><span class="p">></span>Sensor 2: {{ sensor_2.sensor_2}}
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
Sensor OK!<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'data_sensor_3'</span><span class="p">></span>Sensor 3: {{ sensor_3.sensor_3}}<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">BR</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>Sensor N:<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
</pre></div><br/>Проблема в том, что если вывод данных происходит в одном блоке <div></div>, как для Sensor 1 и Sensor 2, то данные периодически обновляются. Но если в разных блоках (Sensor 3), - то обновления не происходит.<br/>Можно посылать отдельные запросы к каждому датчику, тогда все нормально. Но это не удобно, т.к. датчиков много.<br/>Подскажите пожалуйста, как правильно.<br/>И второй вопрос. <br/>Функция update_values() выполняется при первой загрузке страницы, выводятся данные всех датчиков.<br/>Но если откомментарить строку:<br/>//setInterval(update_values, 2000);<br/>Все равно не будет периодического запуска функции.<br/>Заранее благодарен за конструктивный ответ!