Как разобрать json с помощью скрипта ajax в приложении ESP32 - PullRequest
Новая
       18

Как разобрать json с помощью скрипта ajax в приложении ESP32

0 голосов
/ 12 апреля 2020

Я работаю над проектом с использованием ESP32, я получаю некоторые данные от некоторых датчиков и отправляю их на веб-страницу, размещенную на той же плате. Я прочитал некоторую информацию в Интернете и понял, что «лучше» отправлять все данные с нескольких датчиков, используя метод json, поэтому моя функция для получения и отправки данных такова: 

 void handle_leituras()
{
  String results_json = "{ \"data\": " + Data +
                         "," + "\"hora\": " + Hora +
                         "," + "\"temp_amb1\": " + Tout + " }";

  server.send(200, "application/json", results_json);

}

Проверка вышеуказанной функции в последовательном мониторе у меня есть эти данные: 

{"data": Domingo, 12/4/2020,"hora": 20:53,"temp_amb1": 25.75}

Я нашел скрипт, который может получить только одну информацию и распечатать ее на этой странице, это скрипт: 

    function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("DATA").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "leituras", true);
  xhttp.send();
}

Это мой Индекс страницы кода, который показывает данные на веб-странице: 

const char pag_inicial[] PROGMEM = R"=====(
<!DOCTYPE html>
<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">
<title>My 1st test</title></head>
<html>
<body>

<div id="pagina">
<h1>System XPTO</h1>

<div>
    Data: <span id="DATA">ND</span><br>
    Hora: <span id="HORA">ND</span><br>
    Temperatura Ambiente: <span id="TEMPAMB1">ND</span>
</div>

<div id="botoes">
    <button type="button" onclick="sendData(0)" style="width: 80px; height: 30px; margin: 30px;">ON</button>
    <button type="button" onclick="sendData(1)" style="width: 80px; height: 30px; margin: 30px;">OFF</button><BR>
</div>
<script>
setInterval(function() {
  // Call a function repetatively with 1 Second interval
  getData();
}, 1000); //2000mSeconds update rate

//function to set on / off a LED on my board
function sendData(led) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("LEDState").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "setLED?LEDstate="+led, true);
  xhttp.send();
}

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "leituras", true);
  xhttp.send();
  xhttp.onload = function() {
    if (this.status == 200) {
      var jsonResponse = JSON.parse(this.responseText);
      document.getElementById("DATA").innerHTML = jsonResponse.data;
      document.getElementById("HORA").innerHTML = jsonResponse.hora;
      document.getElementById("TEMPAMB1").innerHTML = jsonResponse.temp_amb1;
    }
    else {
      console.log(this.status);
    }
  };
}   
</script>
</div>
</body>
</html>
)=====";

Моя проблема в том, что ... Я не знаю, как изменить этот скрипт, чтобы получить больше значений датчиков из описанной выше функции. Кто-нибудь может спасти меня, пожалуйста? Заранее спасибо;)

1 Ответ

0 голосов
/ 13 апреля 2020

Стандарт XMLHttpRequest поддерживает только responseText и responseXML, не поддерживает свойство responseJSON. Однако, пока ваш сервер отправляет действительную сериализованную строку JSON, responseText должен содержать код JSON в виде текста, поэтому все, что вам нужно сделать, - это проанализировать его с помощью JSON .parse ( ), а затем вы можете получить доступ к каждому элементу JSON с точечной нотацией: 

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "leituras", true);
  xhttp.send();
  xhttp.onload = function() {
    if (this.status == 200) {
      var jsonResponse = JSON.parse(this.responseText);
      document.getElementById("DATA").innerHTML = jsonResponse.data;
      document.getElementById("HORA").innerHTML = jsonResponse.hora;
      document.getElementById("TEMPAMB1").innerHTML = jsonResponse.temp_amb1;
    }
    else {
      console.log(this.status);
    }
  };
}

Этот фрагмент кода работает для всех браузеров, поддерживающих XMLHttpRequest и JSON, пока сервер отправляет действительный JSON объект.

...