如何在ESP32应用程序中使用Ajax脚本解析json [英] How to parse json using ajax script in ESP32 app
问题描述
我正在使用ESP32进行项目开发，我从一些传感器中获取了一些数据，并将其发送到同一板中托管的网页中.我在网上阅读了一些信息，并了解使用json方法从多个传感器发送所有数据更好"，所以我获取和发送数据的功能是:
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. 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:
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:
{"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. Anybody can save me please? Thanks in advance ;)
推荐答案
标准的 XMLHttpRequest 仅支持 responseText 和 responseXML ，但不支持支持 responseJSON 属性.但是，只要您的服务器正在发送有效的序列化JSON字符串， responseText 都应包含JSON代码作为文本，因此您要做的就是使用JSON.parse()进行解析.，然后您可以使用点符号访问每个JSON元素:
The standard XMLHttpRequest only supports responseText and responseXML, it does not support responseJSON property. 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:
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);
}
};
}
只要服务器发送有效的JSON对象，这段代码就适用于所有支持 XMLHttpRequest 和 JSON 的浏览器.
This piece of code works for all browsers that supports XMLHttpRequest and JSON as long as the server is sending a valid JSON object.
这篇关于如何在ESP32应用程序中使用Ajax脚本解析json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
