创客SWITCH

ESP32 Arduino网页上传数据代码解释

包含必要的库

#include <WiFi.h>
#include <WebServer.h>

设置Wi-Fi凭据

const char* ssid = "yourSSID";
const char* password = "yourPASSWORD";

创建Web服务器实例

WebServer server(80);

定义土壤湿度传感器接口

int sensorPin = 34;

初始化设置

void setup() {
  // 初始化串口通信，连接到Wi-Fi，设置Web服务器的路由，然后启动服务器。
}

void loop() {
  // 循环检查并响应客户端请求。
}

处理HTTP请求

server.on("/", HTTP_GET, handle_OnConnect);
server.on("/moisture", HTTP_GET, handle_MoistureData);

JavaScript代码解释

JavaScript代码嵌入在HTML中，用于在客户端（用户的浏览器）上执行，以实现数据的实时更新。

<script>
setInterval(()=>{
  fetch('/moisture').then(response => response.text()).then(data => document.getElementById('moisture').innerHTML = data);
}, 2000);
</script>

 

fetch

fetch 是一种JavaScript API，用于进行网络请求。它是一个强大且灵活的方法，用于向指定的URL发起请求并获取数据。在您的代码中，fetch 用于从ESP32的特定路由（如 "/moisture"）请求数据。

.then()

.then() 是Promise对象上的一个方法。当使用Promise（如fetch返回的Promise）时，.then() 用于处理Promise解析后的结果。

总结

HTML结构

<h1>土壤湿度值: <span id='moisture'></span></h1>

JS

js关键字

JavaScript代码解释

1. setInterval 函数

setInterval(()=>{
  // ...代码...
}, 2000);

2. fetch 函数

fetch('/moisture')

3. .then 方法和链式调用

.then(response => response.text())
.then(data => document.getElementById('moisture').innerHTML = data);

4. 更新网页内容

document.getElementById('moisture').innerHTML = data;

 

示例 1: 使用 innerHTML

innerHTML 属性用于获取或设置HTML元素的内部HTML内容。

示例代码:

<!DOCTYPE html>
<html>
<body>

<h1 id="example">Hello, world!</h1>

<script>
document.getElementById("example").innerHTML = "Welcome to JavaScript!";
</script>

</body>
</html>

解释:

示例 2: 使用 getElementById

getElementById 是一个方法，用于根据提供的ID查找HTML元素。

示例代码:

<!DOCTYPE html>
<html>
<body>

<p id="paragraph">This is a paragraph.</p>

<script>
var para = document.getElementById("paragraph");
alert(para.innerHTML);
</script>

</body>
</html>

解释:

示例 3: 使用 getElementsByTagName

getElementsByTagName 方法返回一个包含所有指定标签名称的元素的集合。

示例代码:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<script>
var paragraphs = document.getElementsByTagName("p");
alert(paragraphs[1].innerHTML);
</script>

</body>
</html>

解释:

关键字解释

1. setInterval 结合HTML使用示例

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>定时器示例</title>
</head>
<body>
  <h2>当前时间</h2>
  <p id="time"></p>

  <script>
    setInterval(() => {
      const now = new Date();
      document.getElementById("time").innerHTML = now.toLocaleTimeString();
    }, 1000);
  </script>
</body>
</html>

使用方法和解释

应用场景

这个示例适用于需要定期更新页面内容的情况，如显示实时时钟。

2. fetch 结合HTML使用示例

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Fetch API 示例</title>
</head>
<body>
  <h2>从服务器获取数据</h2>
  <button id="fetchButton">获取数据</button>
  <p id="data"></p>

  <script>
    document.getElementById("fetchButton").onclick = function() {
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(data => {
          document.getElementById("data").innerHTML = JSON.stringify(data);
        });
    };
  </script>
</body>
</html>

使用方法和解释

本节课源码

#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "2333";
const char* password = "88888888";

WebServer server(80);

int sensorPin = 34; // 土壤湿度传感器接到GPIO34

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, handle_OnConnect);
  server.on("/moisture", HTTP_GET, handle_MoistureData);
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}

void handle_OnConnect() {
String html = "<html><head><meta charset='UTF-8'><script>setInterval(()=>{fetch('/moisture').then(response => response.text()).then(data => document.getElementById('moisture').innerHTML = data);}, 2000);</script></head><body><h1>土壤湿度值: <span id='moisture'></span></h1></body></html>";

  server.send(200, "text/html", html);
}

void handle_MoistureData() {
  int soilMoistureValue = analogRead(sensorPin);
  server.send(200, "text/plain", String(soilMoistureValue));
}

17:14 2024/1/31 项目名称：简单的 JavaScript 弹窗银行账户管理系统 项目描述： 学生需要创建一个使用 JavaScript 的弹窗实现的简单银行账户管理系统，允许用户进行存钱、取钱、查看余额和退出操作。 需求： 1. 使用 JavaScript 编写一个循环，使用户能够不断地执行操作，直到选择退出。 2. 用户可以选择以下操作： - 存钱：使用 `prompt` 函数提示用户输入存款金额，并将其添加到账户余额中。然后使用 `alert` 函数显示更新后的余额。 - 取钱：使用 `prompt` 函数提示用户输入取款金额，但不能取出超过账户余额的金额。如果余额不足，使用 `alert` 函数显示错误信息；否则，从余额中扣除取款金额并使用 `alert` 函数显示更新后的余额。 - 显示余额：使用 `alert` 函数显示当前账户余额。 - 退出：用户可以选择退出系统。 3. 确保输入的金额是有效的数字，防止输入错误。 4. 使用适当的文本消息和弹窗样式来提供用户反馈。 这个作业将帮助学生练习使用 JavaScript 的 `prompt` 和 `alert` 函数进行用户交互，并处理输入和逻辑判断。这种方法将完全依赖于 JavaScript 弹窗，不需要创建 HTML 或 CSS 文件。额外挑战（可选）： 添加用户身份验证，要求用户输入用户名和密码才能访问账户。 添加日期和交易历史记录，以便用户可以查看他们的交易历史。