|
JavaScript / HTML Создание динамической разметки страниц |
12.10.2015, 17:11
|
#1
|
Бывалый
Регистрация: 23.11.2011
Сообщений: 863
Написано 334 полезных сообщений (для 866 пользователей)
|
Послать запрос без перезагрузки страницы.
Есть у меня модуль esp8266 , юзаю его для вкл/выкл вентиляторов на батареи и светодиодной ленты.
Сервер не имеет своей памяти в обычном понимании , код страницы должен быть прописан в прошивку и залит на модуль. Единым файлом , без css , js ,jquery и картинок. (памяти очень мало)
Кнопки сейчас сделаны так
<center><a href='/l1' class='btn'>1 светодиод</a></center>\
сама страницы (/l1) загружается и перенаправляет нас на основную страницу
<html>\ <meta http-equiv='refresh' content='1;URL=/' />\ </html>\
Но этот костыль перезагружает страницу , от чего мы видим белый экран пару секунд.
Хотелось бы как то исправить ситуацию. Но поскольку я плохо знаком с html , спрашиваю тут , как сделать запрос по кнопке без перенаправления и перезагрузки страницы.
Полный код страницы
snprintf ( temp, 1500," <html>\ <head>\ <meta charset='UTF-8' />\ <title>Небольшая страница</title>\ <style>\ body \ { \ background-color: #474D4C;\ Color: #979797;\ }\ .btn {\ border-radius: 5px;\ font-family: Arial;\ font-size: 45px;\ color: #777777;\ padding: 0px;\ background: #ededed;\ border: solid #dcdcdc 2px;\ text-decoration: none;\ }\ .btn:hover {\ background: #dfdfdf;\ }\ </style>\ </head>\ <body>\ <center><h1>Micro server.</h1></center>\ <center><a href='/l1' class='btn'>1 светодиод</a></center>\ <center><a href='/l2' class='btn'>2 светодиод</a></center>\ </body>\ </html>");
|
(Offline)
|
|
12.10.2015, 17:50
|
#2
|
Мастер
Регистрация: 13.06.2011
Сообщений: 1,103
Написано 481 полезных сообщений (для 1,836 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от tirarex
Но этот костыль перезагружает страницу , от чего мы видим белый экран пару секунд.
Хотелось бы как то исправить ситуацию. Но поскольку я плохо знаком с html , спрашиваю тут , как сделать запрос по кнопке без перенаправления и перезагрузки страницы.
|
JavaScipt. jQuery, + Ajax- запросы.
jQuery ищет в тексте кнопку по ее ид. который в теге кнопки [button id=такой то ид]
$('#такой то ид').bind('click' , function () {
А тут текст функции какой привязывается к этой кнопке по нажатию мыши на эту кнопку. Внутри этой функции можно отправить Ajax запрос к какой угодно странице в интернете в том числе к пхп или не пхп скрипту включающему соответствующий диод на сервере
$.getJSON("php/JSON_maker.php", Json , function(data){
и тут действия в зависимости от того че там сервер выдаст на этот запрос
});
или $.post(); или еще чем из средств jQuery
});
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо dsd за это полезное сообщение:
|
|
13.10.2015, 03:02
|
#3
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
jQuery заливать будешь текстом в html? У него железка и там мелкая, там html также нужно дерать как можно меньше. Желательно минифицировать как можно.
Используй Vanilla JS и ванильный AJAX: XMLHttpRequest
// find button var button = document.getElementById('button');
var onClick = function() { // make AJAX request var req = new XMLHttpRequest(); req.addEventListener('load', function() { // console log response console.log(req.response); }); req.open('GET', '/url-here'); req.send(); }
// subscribe to button click button.addEventListener('click', onClick, false);
Лучше сервить веб-панель вообще не с самого девайса.
Девайс пусть просто реализует API - пару web страниц для управления его состояние. А панель контроля реализована где-то на другом серерве. Все что нужно будет, это из панели вызвать нужный API путь на модуле.
Так оптимальнее, проще обновлять, и модуль может буквально "спать" пока на него не ссылаешься, что экономит энергию тоже.
|
(Offline)
|
|
Эти 3 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
|
|
13.10.2015, 04:25
|
#4
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Мока, jQuery можно подключить с внешнего хоста
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
13.10.2015, 10:46
|
#5
|
Бывалый
Регистрация: 23.11.2011
Сообщений: 863
Написано 334 полезных сообщений (для 866 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от ABTOMAT
Мока, jQuery можно подключить с внешнего хоста
|
Устройство юзается как хотспот и не имеет доступ к внешним ресурсам , как дойдут руки , может малину сделаю основным сервером.
За ответы спасибо , проблема решена !
|
(Offline)
|
|
13.10.2015, 13:50
|
#6
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от ABTOMAT
Мока, jQuery можно подключить с внешнего хоста
|
Если девайс юзается как hotspot, то такой возможности не будет.
Если девайс в сети по IP'шнику, то такая возможность будет только если есть доступ к интернету.
В публичных WiFi точках, бывает делают разные системы, где доступ к интернету только после регистрации.
Также внешняя зависимость которая если не будет доступна, то твой девайс "не будет работать".
Зачем тянуть 80Kb+ когда тоже самое пишется практически в столько же строк? И речь идет о менее 100 строк кода. Таких jQuery операторов развелось, которые на JS даже писать не умеют. Ты же вроди тру-web-щик, подавай хороший пример подаванам.
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
|
|
14.10.2015, 00:11
|
#7
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от moka
Зачем тянуть 80Kb+ когда тоже самое пишется практически в столько же строк? И речь идет о менее 100 строк кода. Таких jQuery операторов развелось, которые на JS даже писать не умеют. Ты же вроди тру-web-щик, подавай хороший пример подаванам.
|
Но тогда жи ни будет работать в IE!!11 Пиши все костыли под каждую версию!111
Хотя да, эта проблема уже изжита (наверное)
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
14.10.2015, 00:47
|
#8
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Изжита. А если и кто-то встретился с таким, то по лицу можно бить.
IE7+ поддерживает, так что не нужно париться. На древних IE7-8 проверка на принятое сообщение из 2 строк, меняется на 4.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
17.10.2015, 21:49
|
#9
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
tirarex, почём и где модули берёшь?
|
(Offline)
|
|
17.10.2015, 22:04
|
#10
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,361
Написано 2,473 полезных сообщений (для 6,856 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от ABTOMAT
Пиши все костыли под каждую версию!111
|
Изи
function xhr(){ try { return new XMLHttpRequest(); }catch(e){} try { return new ActiveXObject("Msxml3.XMLHTTP"); }catch(e){} try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }catch(e){} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }catch(e){} try { return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){} try { return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
return null; }
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 4090 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Offline)
|
|
18.10.2015, 01:17
|
#11
|
Бывалый
Регистрация: 23.11.2011
Сообщений: 863
Написано 334 полезных сообщений (для 866 пользователей)
|
Ответ: Послать запрос без перезагрузки страницы.
Сообщение от Phantom
tirarex, почём и где модули берёшь?
|
Брал девбоард тут , за 220руб. http://ru.aliexpress.com/item/ESP826...242633472.html
Продавца не советую , но цена оправдывает.
Отправляет в лучшем случае через пару недель.
+ доставка 30 дней.
По плате - тоже не советую , 100руб переплаты за пару резисторов (необходимых для обвязки модуля) , остальное - бесполезные диоды.
Сам есп ловит не плохо , но есть версия с антенной (керамика + вч разьем).
Программатор на cp2102 - пошел без проблем , но на плате (с есп) спутаны местами txd и rxd.
С батарейками (3шт АА вроде) плата не завелась (3шт gp аккумы на 2500махов 1,2v) ,но с аккумом от нокии проблем нет.
В общем советую взять вот такой модуль (esp-07) http://ru.aliexpress.com/item/Free-s...382097249.html
Из плюсов - слот для антенны , и уже встроенная керамическая. И продавец проверенный , советую к нему заглянуть , смд рассыпуха за копейки.
И под нее платку для распайки , сразу с подтягивающими резисторами. http://ru.aliexpress.com/item/ESP826...381092806.html
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 07:26.
|