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

Question

I am working on a project using ESP32, I get some data from some sensors and send it to a webpage hosted in the same board.我正在使用 ESP32 开展一个项目，我从一些传感器获取一些数据并将其发送到托管在同一块板上的网页。 I read some info on the web and understood that is "better" to send all data from several sensors using json method, so my function to get and send data is this:我阅读了有关 web 的一些信息，并了解到使用 json 方法从多个传感器发送所有数据“更好”，所以我的 function 获取和发送数据是：

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

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

}

Testing above function in serial monitor I have this data:在串行监视器中测试以上 function 我有这个数据：

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

I found a script that can get only one data and print it on that page, this is the script:我找到了一个脚本，它只能获取一个数据并将其打印在该页面上，这是脚本：

    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();
}

Its my index page code that shows data on webpage:它是在网页上显示数据的我的索引页面代码：

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>
)=====";

My problem is...I don't know how to modify this script to get more sensors values from the described above function.我的问题是......我不知道如何修改此脚本以从上述 function 中获取更多传感器值。 Anybody can save me please?请问有人可以救我吗？ Thanks in advance;)提前致谢;）

Answer 1

The standard XMLHttpRequest only supports responseText and responseXML , it does not support responseJSON property.标准XMLHttpRequest仅支持responseText和responseXML ，不支持responseJSON属性。 However, as long as your server is sending a valid serialised JSON string, the responseText should contain the JSON code as text, so all you've got to do is to parse it with JSON.parse(), and then you can access each JSON element with dot notation:但是，只要您的服务器发送一个有效的序列化 JSON 字符串， responseText应该包含 JSON 代码作为文本，所以您所要做的就是用 Z0ECD11C1D7A287401D148A2F 解析它，然后您可以访问每个 7401D148A2F（BBD11C1D7A23）带点符号的 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);
    }
  };
}

This piece of code works for all browsers that supports XMLHttpRequest and JSON as long as the server is sending a valid JSON object.这段代码适用于所有支持XMLHttpRequest和JSON的浏览器，只要服务器发送一个有效的 Z0ECD11C1D7A287401D148A23BBD7A2F8B66666.CDB66666.

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-13 04:16:30

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-13 04:16:30

解决方案1
0 已采纳 2020-04-13 04:16:30