简体   繁体   English

Arduino 导入 jquery 文件

[英]Arduino import jquery file

I have working code for esp8266 in which jquery is imported from the internet, but I need to import it from the downloaded file and I can't do it.我有 esp8266 的工作代码,其中 jquery 是从互联网导入的,但我需要从下载的文件中导入它,但我做不到。 When I write #include "jquery-3.5.1.min.js", it gives an error: jquery-3.5.1.min.js: No such file or directory (It also gives this error if I specify the full path).当我写#include“jquery-3.5.1.min.js”时,它给出了一个错误:jquery-3.5.1.min.js:没有这样的文件或目录(如果我指定完整路径,它也会给出这个错误) . Although this file is located in the same directory as the project file.尽管此文件与项目文件位于同一目录中。 Can you please tell me what am I doing wrong?你能告诉我我做错了什么吗?

The code:编码:

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include "jquery-3.5.1.min.js"


const byte DNS_PORT = 53;
IPAddress apIP(172, 0, 0, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);


String handleRoot = R"=====(
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>\
</head>
<body>
  <h1>Ввод:</h1>
  <input type='text' name='input' id='input' size=2 autofocus>
  <div>
  <br><button id='save_button'>Send</button>
  </div>
<script src="/jquery-3.5.1.min.js"></script>
<script>
var input;
$('#save_button').click(function(e){
    e.preventDefault();
    input = $('#input').val();
    $.get('/send?input=' + input, function(data){
     console.log(data);
    });
  });   
</script>
</body>
</html>
)=====";

void handleSend() {
  if (webServer.arg("input")!= ""){
    Serial.println("Input is: " + webServer.arg("input"));
  }
 }


void setup() {
  Serial.begin(115200);
  delay(10);
  Serial.println("Started");
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("INFO");

  dnsServer.start(DNS_PORT, "*", apIP);

  webServer.onNotFound([]() {
  webServer.send(200, "text/html", handleRoot);
  });
  webServer.on ("/send", handleSend);
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

Your html code is expecting to load the /jquery-3.5.1.min.js from your server(ie your ESP8266), in which your server doesn't serve.您的 html 代码期望从您的服务器(即您的 ESP8266)加载/jquery-3.5.1.min.js ,您的服务器不提供服务。 Giving that jQuery requires 20-30kB of memory and it is probably too slow for ESP8266 to serve it and take too much of precious memory, one quick and alternative solution is to load the jQuery directly from jquery CDN site by changing your JavaScript line to: Giving that jQuery requires 20-30kB of memory and it is probably too slow for ESP8266 to serve it and take too much of precious memory, one quick and alternative solution is to load the jQuery directly from jquery CDN site by changing your JavaScript line to:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Please also delete the #include "jquery-3.5.1.min.js" from your sketch as you #include is for C/C++ to load modules, not design to serve a data file over Internet.还请从您的草图中删除#include "jquery-3.5.1.min.js" ,因为您的#include是用于C/C++ 加载模块,而不是设计用于通过Internet 提供数据文件。

Please noted that this is a workable solution, but it is not a best practise.请注意,这是一个可行的解决方案,但不是最佳实践。 It is better to write pure JavaScript to handle the requests rather than depend on jQuery library which will take up about 30kB+ memory, especially for IoT application when using an MCU as a web server. It is better to write pure JavaScript to handle the requests rather than depend on jQuery library which will take up about 30kB+ memory, especially for IoT application when using an MCU as a web server.

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM