ESP8266 jQuery and AJAX Web Server

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 official 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.

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

Upload this code after 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 

After uploading all you code and Web Pages, jQuery its time to test, get ip from serial monitor and open it in web browser.NodeMCU jQuery AJAX Example

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

 

 

Leave a Reply