Importing JQuery via SPIFFS ESP8266

Question

I have a working code that works well. The essence of the code is that the person connects to the Wi-Fi network, transfers him to the Captive Portal in which he enters some text that is sent to esp8266. But this does not work that way, since I want to do all this without connecting to the network, then importing JQuery from the server is not suitable, you need to do this by connecting JQuery through a file. So for this I loaded it into the esp8266 file system, but I could not find information on how to include this file in the html code now. Please tell me how to do this?

Code: (key lines are highlighted).

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <FS.h>

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>


   <script src="jquery"></script>


    <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='send_button'>Send</button>
      </div>
<script>
  var input;
  $('#send_button').click(function(e){
    e.preventDefault();
    input = $('#input').val();
    $.get('/send?input=' + input, function(data){
     console.log(data);
    });
  });   
</script>
</body>
</html>
)=====";

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

void setup() {
  Serial.begin(115200);


  SPIFFS.begin();
  File jquery = SPIFFS.open("/jquery-3.5.1.min.js", "r");


  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();}

is it `jquery.js`? the webServer must to serve it from SPIFFS — Juraj, Aug 02 '20 at 08:22
I need to somehow open a JQuery file that is stored in the ESP8266 memory using spiffs. — exiperon, Aug 02 '20 at 10:29
maybe it won't answer your question, but why you need jQuery at all? Can't you do it with good plain javascript? Your js code seems pretty simple. By the way, have you tried to import jquery like this? `` I don't think you need to use SPIFFS, jQuery should be loaded from the filesystem — Gianluca, Aug 02 '20 at 11:12
I need to use JQuery because I don't know how to do it without it :(.If you know how to do this in pure js, please tell me. — exiperon, Aug 02 '20 at 11:34
Instead of loading jQuery from SPIFFS, load it from third-party CDN. Change the line to ``. Best way is to learn how to send the get request with pure JavaScript (google "JavaScript Ajax"). — hcheung, Aug 04 '20 at 13:18

Importing JQuery via SPIFFS ESP8266

0 Answers0