esp32

Question

我正在尝试从我的 ESP32 获取多个值并在不刷新的情况下将它们显示在网页上 ajax。到目前为止，我在网上只找到了只更新一个变量的例子（见下面的例子），但我怎样才能更新多个变量？

我的 index.h 文件中的代码：

<script>
setInterval(function() {
  // Call a function repetatively with regular interval
  getData();
}, 500); //500mSeconds update rate

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

</script>

在此示例中，ADCValue 是用响应文本编写的，但是如果我有多个值进来怎么办？

Answer 1

在 esp32 服务器中您需要响应 JSON 消息。像这样

{"var1": "value1", "var1": "value2"}

ESP32 中的示例代码

// Send headers
client.println("HTTP/1.1 200 OK");
client.println("Content-type: application/json");
client.println();

// Send http body
String var1 = "value1";
String var2 = "value2";
String jresp = "{\"var1\":\""+var1+"\",\"var1\":\""+var2+"\"}";
client.println(jresp);
client.println();

最后，在你的JS代码中，你可以做这样的事情

xhttp.onreadystatechange = function() {
    if (http.readyState == 4) {
        try {
            var msg = JSON.parse(http.responseText);
            var var1 = msg.var1;
            var var2 = msg.var2;
            // You got 2 values above
        } catch (e) {}
    }
}

esp32 - Ajax 获取多个值

esp32 - Ajax get multiple values

variables

ajax

webserver

arduino