Importing JQuery via SPIFFS ESP8266

332 views Asked by At

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

There are 0 answers