ESP8266 JQuery and AJAX Web Server

ESP8266 jQuery and AJAX Web Server
March 10, 2018 ESP8266, IoT Tutorials AJAX, ESP8266, jQuery, NodeMCU
This example shows how to use jQuery in ESP8266, NodeMCU ? There are two ways to use jQuery in
ESP8266 Web Sever, first is to use cdn server and second is directly putting jQuery on ESP Flash File
System. We will look into both examples. We make use of jQuery Knob to demonstrate real time
fading of LED control using jQuery and AJAX requests.
What is jQuery ?
jQuery is not a language, but it is a well written JavaScript code. As quoted on o icial jQuery website,
“it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development”.
What is Ajax and jQuery?

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using
both HTTP Get and HTTP Post – And you can load the external data directly into the selected HTML
elements of your web page! Without jQuery, AJAX coding can be a bit tricky!
Example 1: NodeMCU Using jQuery from CDN

server
In this example we use CDN server to get jQuery file. Disadvantage of this method is we need active
internet connection to the WiFi Hot spot.
1 /*
2 * ESP8266 NodeMCU jQuery CDN Demo
3 *
4 * https://circuits4you.com
5 */
6 #include <ESP8266WiFi.h>
7 #include <WiFiClient.h>
8
9 //ESP Web Server Library to host a web page
10 #include <ESP8266WebServer.h>
11
12 //---------------------------------------------------------------
13 //Our HTML webpage contents in program memory
14 const char MAIN_page[] PROGMEM = R"=====(
15 <!DOCTYPE html>
16 <html>
17 <head>
18 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jqu
19 <script>
20 $(document).ready(function(){
21 $("p").click(function(){
22 $(this).hide();
23 });
24 });
25 </script>
26 </head>
27 <body>
28
29 <p>If you click on me, I will disappear.</p>
30 <p>Click me away!</p>
31 <p>Click me too!</p>
32 <br><hr>
33 <a href="https://circuits4you.com">circuits4you.com</a>
34 </body>
35 </html>
36 )=====";
37 //---------------------------------------------------------------
38
39 //On board LED Connected to GPIO2
40 #define LED 2
41
42 //SSID and Password of your WiFi router
43 const char* ssid = "circuits4you.com";
44 const char* password = "yourWiFipassword";
45
46 //Declare a global object variable from the ESP8266WebServer class.
47 ESP8266WebServer server(80); //Server on port 80
Open serial monitor and get the ip address and enter ip in web browser.
Example 2: ESP8266 Web Server with jQuery

and AJAX
In this example we load our web page, jQuery and other java Scripts directly on the ESP Flash File
System. Read more on SPIFFS
34 void handleWebRequests(){
35 if(loadFromSpiffs(server.uri())) return;
36 String message = "File Not Detected\n\n";
37 message += "URI: ";
38 message += server.uri();
39 message += "\nMethod: ";
40 message += (server.method() == HTTP_GET)?"GET":"POST";
41 message += "\nArguments: ";
42 message += server.args();
43 message += "\n";
44 for (uint8_t i=0; i<server.args(); i++){
45 message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg
46 }
47 server.send(404, "text/plain", message);
48 Serial.println(message);
49 }
50
50
51 void setup() {
52 delay(1000);
53 Serial.begin(115200);
54 Serial.println();
55
56 pinMode(LED,OUTPUT);
57 //Initialize File System
58 SPIFFS.begin();
59 Serial.println("File System Initialized");
60
61
62 //Connect to wifi Network
63 WiFi.begin(ssid, password); //Connect to your WiFi router
64 Serial.println("");
65
66 // Wait for connection
67 while (WiFi.status() != WL_CONNECTED) {
68 delay(500);
69 Serial.print(".");
70 }
71
72 //If connection successful show IP address in serial monitor
73 Serial.println("");
74 Serial.print("Connected to ");
75 Serial.println(ssid);
76 Serial.print("IP address: ");
77 Serial.println(WiFi.localIP()); //IP address assigned to your ESP
78
79 //Initialize Webserver
80 server.on("/",handleRoot);
Upload this code a er that you have to upload your SPIFFS FLASH data
How to upload flash data?
Step 1: PWM_ESP8266_Ajax_Demo
Step 2: Put these files in data folder and this folder must be near to your .ino file
Step 3: Upload SPIFF using Arduino IDE ESP8266 Sketch Data Upload
A er uploading all you code and Web Pages, jQuery its time to test, get ip from serial monitor and
open it in web browser.
Rotate the knob and observer on board LED Fading.
Related Notes:
1. AJAX demo bi-direction communication

2. Using analog gauge to display adc value in real time
3. SPIFFS File System
Related
ESP8266 (ajax) update part of ESP8266 data logging with Web server on ESP32: How to
web page without refreshing real time graphs update and display sensor
February 4, 2018 January 11, 2019 values?
In "ESP8266" In "ESP8266" November 20, 2018
In "ESP32"

ESP8266 JQuery and AJAX Web Server

Uploaded by

Copyright:

Available Formats

ESP8266 JQuery and AJAX Web Server

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ESP8266 JQuery and AJAX Web Server

Uploaded by

Copyright:

Available Formats

ESP8266 jQuery and AJAX Web Server

What is Ajax and jQuery?

Example 1: NodeMCU Using jQuery from CDN

Example 2: ESP8266 Web Server with jQuery

How to upload flash data?

1. AJAX demo bi-direction communication

You might also like