• Author / Uploaded
• saravanan

• Categories
• J Query
• Ajax (Programación)
• Estándares web
• Red mundial
• Tecnología

Citation preview

---

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 3 4 5 6 7 8 9 10 11

/* * ESP8266 NodeMCU jQuery CDN Demo * * https://circuits4you.com */ #include #include //ESP Web Server Library to host a web page #include

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

//--------------------------------------------------------------//Our HTML webpage contents in program memory const char MAIN_page[] PROGMEM = R"=====(

If you click on me, I will disappear.

Click me away!

Click me too!

circuits4you.com

)====="; //--------------------------------------------------------------//On board LED Connected to GPIO2 #define LED 2 //SSID and Password of your WiFi router const char* ssid = "circuits4you.com"; const char* password = "yourWiFipassword"; //Declare a global object variable from the ESP8266WebServer class. 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

void handleWebRequests(){ if(loadFromSpiffs(server.uri())) return; String message = "File Not Detected\n\n"; message += "URI: "; message += server.uri(); message += "\nMethod: "; message += (server.method() == HTTP_GET)?"GET":"POST"; message += "\nArguments: "; message += server.args(); message += "\n"; for (uint8_t i=0; i