forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   Послать запрос без перезагрузки страницы. (http://forum.boolean.name/showthread.php?t=20039)

tirarex 12.10.2015 17:11
Послать запрос без перезагрузки страницы.
 
Есть у меня модуль esp8266 , юзаю его для вкл/выкл вентиляторов на батареи и светодиодной ленты.
Сервер не имеет своей памяти в обычном понимании , код страницы должен быть прописан в прошивку и залит на модуль. Единым файлом , без css , js ,jquery и картинок. (памяти очень мало)

Кнопки сейчас сделаны так
PHP код:
<center><a href='/l1' class='btn'>1 светодиод</a></center>\ 
сама страницы (/l1) загружается и перенаправляет нас на основную страницу
PHP код:
<html>\
      <meta http-equiv='refresh' content='1;URL=/' />\
 </html>\ 
Но этот костыль перезагружает страницу , от чего мы видим белый экран пару секунд.
Хотелось бы как то исправить ситуацию. Но поскольку я плохо знаком с html , спрашиваю тут , как сделать запрос по кнопке без перенаправления и перезагрузки страницы.

Полный код страницы

PHP код:
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>"); 



dsd 12.10.2015 17:50
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от tirarex (Сообщение 300463)

Но этот костыль перезагружает страницу , от чего мы видим белый экран пару секунд.
Хотелось бы как то исправить ситуацию. Но поскольку я плохо знаком с html , спрашиваю тут , как сделать запрос по кнопке без перенаправления и перезагрузки страницы.
JavaScipt. jQuery, + Ajax- запросы.
jQuery ищет в тексте кнопку по ее ид. который в теге кнопки [button id=такой то ид]
$('#такой то ид').bind('click' , function () {

А тут текст функции какой привязывается к этой кнопке по нажатию мыши на эту кнопку. Внутри этой функции можно отправить Ajax запрос к какой угодно странице в интернете в том числе к пхп или не пхп скрипту включающему соответствующий диод на сервере

$.getJSON("php/JSON_maker.php", Json , function(data){
и тут действия в зависимости от того че там сервер выдаст на этот запрос
});
или $.post(); или еще чем из средств jQuery

});

moka 13.10.2015 03:02
Ответ: Послать запрос без перезагрузки страницы.
 
jQuery заливать будешь текстом в html? У него железка и там мелкая, там html также нужно дерать как можно меньше. Желательно минифицировать как можно.

Используй Vanilla JS и ванильный AJAX: XMLHttpRequest

PHP код:
// 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 путь на модуле.
Так оптимальнее, проще обновлять, и модуль может буквально "спать" пока на него не ссылаешься, что экономит энергию тоже.

ABTOMAT 13.10.2015 04:25
Ответ: Послать запрос без перезагрузки страницы.
 
Мока, jQuery можно подключить с внешнего хоста

tirarex 13.10.2015 10:46
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от ABTOMAT (Сообщение 300492)
Мока, jQuery можно подключить с внешнего хоста
Устройство юзается как хотспот и не имеет доступ к внешним ресурсам , как дойдут руки , может малину сделаю основным сервером.

За ответы спасибо , проблема решена !

moka 13.10.2015 13:50
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от ABTOMAT (Сообщение 300492)
Мока, jQuery можно подключить с внешнего хоста
Если девайс юзается как hotspot, то такой возможности не будет.
Если девайс в сети по IP'шнику, то такая возможность будет только если есть доступ к интернету.
В публичных WiFi точках, бывает делают разные системы, где доступ к интернету только после регистрации.
Также внешняя зависимость которая если не будет доступна, то твой девайс "не будет работать".
Зачем тянуть 80Kb+ когда тоже самое пишется практически в столько же строк? И речь идет о менее 100 строк кода. Таких jQuery операторов развелось, которые на JS даже писать не умеют. Ты же вроди тру-web-щик, подавай хороший пример подаванам.

ABTOMAT 14.10.2015 00:11
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от moka (Сообщение 300502)
Зачем тянуть 80Kb+ когда тоже самое пишется практически в столько же строк? И речь идет о менее 100 строк кода. Таких jQuery операторов развелось, которые на JS даже писать не умеют. Ты же вроди тру-web-щик, подавай хороший пример подаванам.
Но тогда жи ни будет работать в IE!!11 Пиши все костыли под каждую версию!111
Хотя да, эта проблема уже изжита (наверное)

moka 14.10.2015 00:47
Ответ: Послать запрос без перезагрузки страницы.
 
Изжита. А если и кто-то встретился с таким, то по лицу можно бить.

IE7+ поддерживает, так что не нужно париться. На древних IE7-8 проверка на принятое сообщение из 2 строк, меняется на 4.

Phantom 17.10.2015 21:49
Ответ: Послать запрос без перезагрузки страницы.
 
tirarex, почём и где модули берёшь?

Randomize 17.10.2015 22:04
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от ABTOMAT (Сообщение 300532)
Пиши все костыли под каждую версию!111
Изи
PHP код:
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;
} 

tirarex 18.10.2015 01:17
Ответ: Послать запрос без перезагрузки страницы.
 
Цитата:
Сообщение от Phantom (Сообщение 300596)
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


Часовой пояс GMT +4, время: 09:55.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot