• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

ESP32 присвоить переменной значение из веб формы

P

PMA

New member
приветствую всех.
в программировании есп я пока ноль. поэтому биение головой об клаву постоянное.
на данный момент споткнулся на простой вещи.
в веб морде пользователь набирает имя сервера (в моем случае mqtt), имя пользователя и пароль. Нажимает кнопку "сохранить"
Как эти поля перенести в переменные внутри есп32? я могу отреагировать на нажатие кнопки, но не могу выудить данные. поля для ввода, на самой странице, описаны так: "<input name='ServerName' maxlength="35" size="35" value=%ServerName%>" т.е. ориентир, после которого нужно забрать строку для записи есть - ServerName
именно есп32. Для есп 8266 я нашел не один пример решения подобной задачи. но они не сработали :(
 
Сергей_Ф

Сергей_Ф

Moderator
Команда форума
@PMA у вас ServerName не может быть ориентиром. Это данные, по тому что вы тут написали.
 
P

PMA

New member
Сергей_Ф написал(а):
@PMA у вас ServerName не может быть ориентиром. Это данные, по тому что вы тут написали.
Нажмите для раскрытия...
вы правы.
исправил в странице код
теперь он выглядит так: <input name='%ServName%' maxlength="35" size="35" value=%ServerName%>

ServName это ориентир. и его нахожу без проблем. а далее затык.
Похоже я понял, где моя проблема. У меня огромный пробел знаний в том, в каком виде данные со страницы передаются в есп как таковые вообще.
Где почитать?
 
Сергей_Ф

Сергей_Ф

Moderator
Команда форума
PMA написал(а):
У меня огромный пробел знаний в том, в каком виде данные со страницы передаются в есп как таковые вообще.
Нажмите для раскрытия...
при чем тут esp? Вы данные со странице передаёте на сервер. На чем сделан сервер вообще не важно. У сервера есть обработчик запроса. Этот обработчик и должен получить и разобрать строку запроса. А уж как он данные из нее передаст в программу, это совсем другая тема.
Пробелы у вас, судя по всему, во всех шагах. Потому даже не знаю что посоветовать читать. Попробуйте начать с учебников по html, JavaScript. Когда поймёте как и куда отправляются данные со страницы, то переходите на C++ для создания сервера обработчиков http запросов.
 
P

PMA

New member
Сергей_Ф написал(а):
при чем тут esp? Вы данные со странице передаёте на сервер. На чем сделан сервер вообще не важно. У сервера есть обработчик запроса. Этот обработчик и должен получить и разобрать строку запроса. А уж как он данные из нее передаст в программу, это совсем другая тема.
Пробелы у вас, судя по всему, во всех шагах. Потому даже не знаю что посоветовать читать. Попробуйте начать с учебников по html, JavaScript. Когда поймёте как и куда отправляются данные со страницы, то переходите на C++ для создания сервера обработчиков http запросов.
Нажмите для раскрытия...
с html стало более менее понятно. особенно про обработку данных из форм :)
Теперь следующий шаг.
передаю свои данные через адресную строку. например: test.htm?login=222&pass=333
поскольку данных у меня максимум 4ре числа, то должно хватить.
теперь затупил на стороне есп. не могу понять простого.. библиотека ESPAsyncWebServer.. как с ее помощью отловить эти переменные?
 
Сергей_Ф

Сергей_Ф

Moderator
Команда форума
@PMA извините, вам лень ту тему почитать? Там всего три библиотеки упоминаются. Посмотрите где есть это есть. Дела на 5 минут.
 
G

Goldz

Member
PMA написал(а):
этот пример я изначально нашел.
но к каой библиотеке он применим? я использую AsyncWebServer
и ессно полдучаю ошибку No membernamed named "arg"
Нажмите для раскрытия...
Здравствуйте! Четвертый день бьюсь с подобной ситуацией. Необходимо получить состояние чекбокса и текстового поля. <a href> не предлагать. Файлы храню на SPIFFS. Быть может Вы разобрались с этой проблемой? Помогите!!!!!
 
Ildarmustafin86

Ildarmustafin86

Active member
Отправка:
JavaScript: 
    document.getElementById("Button1").addEventListener("click", function(event){
    event.preventDefault();
    let chartDays = document.getElementById("input1").value;
    let jsonData = 'input1=' + chartDays;
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            Console.log("Success");
        }
    };
    xhttp.open("GET", 'chartDays?'+jsonData, true);
    xhttp.timeout = 10000;
    xhttp.send();       
    });
Прием:
C: 
server.on("/chartDays", HTTP_GET, [](AsyncWebServerRequest * request) {
    int chartDays = request->arg("input1").toInt();
    request->send(200, "text/plain", "");
  });
Что то в этом роде. Это выдранный кусок
 
G

Goldz

Member
Ildarmustafin86 написал(а):
Отправка:
JavaScript: 
    document.getElementById("Button1").addEventListener("click", function(event){
    event.preventDefault();
    let chartDays = document.getElementById("input1").value;
    let jsonData = 'input1=' + chartDays;
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            Console.log("Success");
        }
    };
    xhttp.open("GET", 'chartDays?'+jsonData, true);
    xhttp.timeout = 10000;
    xhttp.send();     
    });
Прием:
C: 
server.on("/chartDays", HTTP_GET, [](AsyncWebServerRequest * request) {
    int chartDays = request->arg("input1").toInt();
    request->send(200, "text/plain", "");
  });
Что то в этом роде. Это выдранный кусок
Нажмите для раскрытия...
Здравствуйте!
Так вышло что жизнь не заставляла меня программировать html. Чуть чуть разобрался, но а в джаве совсем глухой.
Я понимаю что у Вас своих дел полно, но набравшись наглости прошу Вас довести ответ до состояния файлов.
Мой html выглядит так
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Proba</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - http://www.wysiwygwebbuilder.com">
</head>
<body>
   <div id="wb_Checkbox1" style="position:absolute;left:280px;top:161px;width:98px;height:44px;z-index:0;">
      <input type="checkbox" id="Checkbox1" name="" value="on" checked style="position:absolute;left:0;top:0;"><label for="Checkbox1"></label>
   </div>
   <input type="text" id="Editbox1" style="position:absolute;left:255px;top:113px;width:139px;height:27px;z-index:1;" name="Editbox1" value="" spellcheck="false">
<link href="Безымянный1.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</body>
</html>
Я думаю что за рабочий пример в виде файлов Вам будут благодарны многие пользователи, а не только я.
 
Ildarmustafin86

Ildarmustafin86

Active member
Кстати, добавьте javascript на форму, иначе придется вручную его всегда добавлять
 
Ildarmustafin86

Ildarmustafin86

Active member
Я думаю вашу задачу нужно разделить на две части. Первое, это определить, что вы хотите передать. И второе, это передача-прием. Вторую я уже скинул. Осталось найти параметр для передачи и присвоить его заместо chartDays.
 
G

Goldz

Member
Ildarmustafin86 написал(а):
Я думаю вашу задачу нужно разделить на две части. Первое, это определить, что вы хотите передать. И второе, это передача-прием. Вторую я уже скинул. Осталось найти параметр для передачи и присвоить его заместо chartDays.
Нажмите для раскрытия...
Кусок джавы, который Вы указали это куда? Вставить в HTML или оформить отдельным файлом? Если файлом, то какое расширение и как сделать на него ссылку из INDEX.HTML
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу