ESP8266 网络服务器

Question

I found interesting code on stack overflow, but the only thing I don't like about it is that it uses JQuery that is imported via the Internet, and I need it all to work without connecting to the Internet.我发现了关于堆栈溢出的有趣代码，但我唯一不喜欢的是它使用了通过 Internet 导入的 JQuery，我需要它在不连接到 Internet 的情况下全部工作。 Can you please tell me how this can be changed?你能告诉我如何改变吗？

Code:代码：

void handleRoot() {

  snprintf ( htmlResponse, 3000,
"<!DOCTYPE html>\
<html lang=\"en\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
  </head>\
  <body>\
          <h1>Time</h1>\
          <input type='text' name='date_hh' id='date_hh' size=2 autofocus> hh \
          <div>\
          <br><button id=\"save_button\">Save</button>\
          </div>\
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\    
    <script>\
      var hh;\
      $('#save_button').click(function(e){\
        e.preventDefault();\
        hh = $('#date_hh').val();\       
        $.get('/save?hh=' + hh , function(data){\
          console.log(data);\
        });\
      });\      
    </script>\
  </body>\
</html>"); 
      server.send ( 200, "text/html", htmlResponse );  
}
void handleSave() {
  if (server.arg("hh")!= ""){
    Serial.println("Hours: " + server.arg("hh"));
}
}
void setup() {

  // Start serial
  Serial.begin(115200);
  delay(10);


  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  server.on ( "/", handleRoot );
  server.on ("/save", handleSave);

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

Answer 1

The minified jquery javascript can be stored on the ESP and served up by the module when the browser requests it.缩小的 jquery javascript 可以存储在 ESP 上，并在浏览器请求时由模块提供。

One easy way to do this is to use the SPI Flash File System to serve up the HTML as well as the JQuery javascript.一种简单的方法是使用SPI Flash 文件系统来提供 HTML 和 JQuery ZDE9B9ED708D7E919ZEEFFEE。

This means creating an index.html in a data sub-directory in the sketch.这意味着在草图的data子目录中创建一个index.html 。 Add the HTML in the original sketch into the file.将原始草图中的 HTML 添加到文件中。 Also change the script source in this file to a relative path:还要将此文件中的脚本源更改为相对路径：

<script src="jquery.min.js"></script>

Then download jquery.min.js and copy this into the data sub-directory as well.然后下载jquery.min.js并将其复制到data子目录中。

The example code at https://tttapa.github.io/ESP8266/Chap11%20-%20SPIFFS.html can be used as a starting point for the rest of the code. The example code at https://tttapa.github.io/ESP8266/Chap11%20-%20SPIFFS.html can be used as a starting point for the rest of the code. The main parts of this involve initializing SPIFFS and setting up the handler for the file request:其中的主要部分涉及初始化 SPIFFS 和为文件请求设置处理程序：

SPIFFS.begin();

server.onNotFound([]() {
  if (!handleFileRead(server.uri()))
    server.send(404, "text/plain", "404: Not Found");
});

// retain the save endpoint
server.on("/save", handleSave);

server.begin();

Then implement the file handler and its content type handler:然后实现文件处理程序及其内容类型处理程序：

String getContentType(String filename)
{
  if (filename.endsWith(".html")) return "text/html";
  else if (filename.endsWith(".css")) return "text/css";
  else if (filename.endsWith(".js")) return "application/javascript";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  return "text/plain";
}

bool handleFileRead(String path) {
  Serial.println("handleFileRead: " + path);
  if (path.endsWith("/"))
  {
    path += "index.html";
  }

  String contentType = getContentType(path);
  if (SPIFFS.exists(path))
  {
    File file = SPIFFS.open(path, "r");
    size_t sent = server.streamFile(file, contentType);
    file.close();
    return true;
  }

  Serial.println("\tFile Not Found");
  return false;
}

Alternate Approach: Remove the JQuery dependency替代方法：删除 JQuery 依赖项

An alternative approach is to rewrite the javascript so that JQuery is not required.另一种方法是重写 javascript 以便不需要 JQuery。

This involves registering an onclick handler on the button ( https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers ), getting the value from the input field ( https://stackoverflow.com/a/11563667/1373856 ) and sending a GET request ( https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send ) This involves registering an onclick handler on the button ( https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers ), getting the value from the input field ( https://stackoverflow.com /a/11563667/1373856 ）并发送 GET 请求（ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send ）

Answer 2

You just has to include it as script-tag with the local path on your machine.您只需将其作为脚本标签包含在您机器上的本地路径中即可。

<script src="path-to-jquery/jquery.min.js" type="text/javascript"></script>

Edit: First you have to download the needed jquery file and store it in your local path.编辑：首先，您必须下载所需的 jquery 文件并将其存储在本地路径中。 The needed path-to-jquery should than be a relative path from the html-file to the jquery.所需的 jquery 路径应该是从 html 文件到 jquery 的相对路径。

ESP8266 网络服务器

问题描述

2 个解决方案

解决方案1
1 2020-08-03 11:41:26

Alternate Approach: Remove the JQuery dependency替代方法：删除 JQuery 依赖项

解决方案2
0 2020-08-01 10:53:35

ESP8266 网络服务器

问题描述

2 个解决方案

解决方案1 1 2020-08-03 11:41:26

Alternate Approach: Remove the JQuery dependency替代方法：删除 JQuery 依赖项

解决方案2 0 2020-08-01 10:53:35

解决方案1
1 2020-08-03 11:41:26

解决方案2
0 2020-08-01 10:53:35