如何在 ESP32 应用程序中使用 ajax 脚本解析 json

Question

我正在使用 ESP32 进行一个项目，我从一些传感器获取一些数据并将其发送到同一块板中托管的网页。我在网上阅读了一些信息，了解到 "better" 使用 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>
)=====";

我的问题是...我不知道如何修改此脚本以从上述函数中获取更多传感器值。有人可以救我吗？提前致谢 ;)

Answer 1

标准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 对象即可。

如何在 ESP32 应用程序中使用 ajax 脚本解析 json

How to parse json using ajax script in ESP32 app

javascript

ajax

parsing

json

esp32