当前位置：首页 > news >正文

ESP32-Web-Server编程-JS 基础 2

news 2025/9/7 15:47:18

ESP32-Web-Server编程-JS 基础 2

概述

上节介绍了 JS 编程的基础。如前所述，在 HTML 中，可以通过下述两种方式使用 JS 程序：

直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。
通过 src 元素引入外部的 JavaScript 文件。

在上一个小节的示例中，我们介绍了第一种方式。本小节主要介绍第二节方式。

示例解析

相比上节的示例，本小节主要添加了三处更改：

1）在 index.html 中通过 script指定需要的 JavaScript 文件

<body><h1>Date and Time</h1><p id="dateTime"></p><script src="script.js"></script></body>

2）在 components/fs_image/js 目录新建 script.js 文件：

function time() {var vWeek, vWeek_s, vDay;vWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];var date =  new Date();year = date.getFullYear();month = date.getMonth() + 1;day = date.getDate();hours = date.getHours();minutes = date.getMinutes();seconds = date.getSeconds();vWeek_s = date.getDay();document.getElementById("dateTime").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
};
setInterval("time()", 1000);

3）更改后端代码，增加请求 JS 文件的 hander:

/* Handler to respond with js.* Browsers expect to GET website icon at URI /stylesheet.css.*/
static esp_err_t js_get_handler(httpd_req_t *req)
{extern const unsigned char js_start[] asm("_binary_script_js_start");extern const unsigned char js_end[]   asm("_binary_script_js_end");const size_t js_size = (js_end - js_start);httpd_resp_set_type(req, "text/javascript");httpd_resp_send(req, (const char *)js_start, js_size);return ESP_OK;
}

与前面提到的类似，在加载 HTML 文件时，若发现 HTML 通过 src 指定了要加载的文件，浏览器会自动发起 Get 请求来向服务器请求对应的资源。