Az AJAX lehetővé teszi az adatcserét a szerverrel, és a weboldal egyes részeinek frissítését, a teljes oldal újratöltése nélkül. A jQuery ajax() metódus biztosítja az AJAX alapvető funkcióit a jQuery-ben. Ez a cikk bemutatja jQuery ajax() és az ESPAsyncWebServer használatálatát.
Ebben a példában az Esp32 Web Updater és SPIFFS fájl menedzser oldalon szereplő kódot fogjuk felhasználni. A következő tömörített mappa tartalmazza az összes fájlt, ami ebben a cikkben szerepel.
Részletesebb információ az ESP32 Aszinkron webszerver használatáról itt.
Készítsük el a hardvert. Csatlakoztassunk egy ledet 330ohmos előtétellenállással egy ESP32 gpio2 lábához és kapcsoljunk egy LDR-ből és egy 10k ellenállásból álló feszültségosztót a gpio36 lábához az alábbi kép alapján.
Csomagoljuk ki a letöltött tömörített mappát. majd a Esp32-AsyncWebserver-jQuery-ajax mappát másoljuk az …/Arduno könyvtárba. Nyissuk meg az Arduino IDE-t, válasszuk ki a Fájl – Vázlatfüzet/sketchbook menüpontban az Esp32-AsyncWebserver-jQuery-ajax fájlt, a config.h fájlban írjuk be a Wifi csatlakozáshoz szükséges SSID-t és jelszót, majd töltsük fel az ESP32 fejlesztőtáblára.
const char* ssid = "SSID";
const char* password = "Wifi_jelszó";
const char* http_username = "admin";
const char* http_password = "admin";
const char* host = "esp32-asyncwebserver";
...Nyissuk meg a böngészőben a http://esp32-asyncwebserver.local/manager címet. Az alapértelmezett bejelentkezési azonosítók: admin/admin. Ezt is megváltoztathatjuk a config.h fájlban.
A megnyíló oldalon töltsük fel a projektmappából a jquery-3.6.3.min.js és az index.html fájlokat, majd lépjünk a http://esp32-asyncwebserver.local oldalra.
A config.h fájlban adjuk meg a feltöltött jQuery fájl nevét az elején a perjellel együtt. Ide kerültek az alap vázlat kibővítéséhez használt kódrészlet változói.
...
const char* jquery = "/jquery-3.6.3.min.js";
const char ldrPin = 36;
String sensorValue = "0";
const char ledPin = 2;
String ledValue = "true";A loop() függvényben másodpercenként beolvassuk az LDR fényérzékelő értékét. Az aszinkron webszerver alkalmazásakor ha lehet kerüljük a késleltetéseket, ezért nem használjuk a delay() függvényt. Az alábbi kódrészlet a millis() függvény segítségével egy időzítést valósít meg, így nem akad meg a program futása.
Millis = millis();
if (Millis - previousMillis >= 1000)
{
previousMillis = Millis;
sensorValue = String(analogRead(ldrPin));
}A következő kód a feltöltött index.html fájl által küldött kéréseket kezeli le.
/********** A hozzáadott server.on kód ide... ***********/
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, "/index.html", "text/html", false, processor);
});
server.on(jquery, HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, jquery, "text/javascript");
});
server.on("/sensorvalue", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(200, "text/text", sensorValue);
});
server.on("/ledvalue", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(200, "text/text", ledValue);
});
server.on("/ledswitch", HTTP_POST, [](AsyncWebServerRequest *request)
{
ledValue = request->getParam(0)->value();
if(ledValue == "true")
{
ledValue = "false";
digitalWrite(ledPin, LOW);
}
else if(ledValue == "false")
{
ledValue = "true";
digitalWrite(ledPin, HIGH);
}
request->send(200);
});
/*************** A hozzáadott server.on kód eddig *******************/Az server.on(„/”, HTTP_GET ….}) függvény betölti a kezdőlapot, a feltöltött index.html fájlt.
A server.on(jquery, HTTP_GET ….}) függvény az index.html fájl head szakaszában meghívott jQuery fájlt szolgálja ki.
<!DOCTYPE html>
<html>
<head>
<title>ESP32 asyncWebserver-jQuery-ajax</title>
<script src="jquery-3.6.3.min.js"></script>
.....A javascript kódokat a jQuery ready() metódus törzsébe írjuk, a ready() esemény akkor következik be, amikor a DOM betöltődik.
<script>
$(document).ready(function() {
....
</script>A server.on(„/sensorvalue”, HTTP_GET …}) függvényhez másodpercenként érkezik kérés, válaszul visszaadja az LDR fényérzékelő értékét. A html kódban ehez a jQuery setInterval() függvényét használjuk, ez a milliszekundumban megadott időközönként lefut. A setInterval() függvény törzsében helyeztük el a jQuery ajax get() függvényét, amely a megadott url-ről lekéri a fényérzékelő értékét.
setInterval(function () {
$.get("/sensorvalue", function(data){
$('#sensor_result').html(data);
});
},1000);A jQuery get() metódus törzsében a kapot data értékét beírjuk a sensor_result id-vel rendelkező <div> elembe.
<div id="sensor_result" style="height:40px;"></div>A server.on(„/ledvalue”, HTTP_GET …}) a led állapotát adja vissza, ezt a led kapcsolásához használt gomb feliratának módosítására használjuk. A get() függvénnyel lekérjük a szerverről a led állapotát, majd ezt egy rejtett html elemben tároljuk. ezt az értéket átadjuk egy változónak is. A változó értékét megvizsgáljuk és ennek megfelelően módositjuk a gomb feliratát.
$.get("ledvalue", function(data) {
$('#led_status').val(data);
});
var str = $("#led_status").val();
if(str == "true") {
$("#ledswitch_button").text("Kapcsold be a ledet!");
}
else {
$("#ledswitch_button").text("Kapcsold ki a ledet!");
}Az index.html fájlban a gomb megnyomásakor a jQuery click() eseménykezelő függvényben a rejtett html elemből kiolvassuk a led státuszát, ennek megfelelően beállítjuk a gomb feliratát, majd a jQuery post() metódus segítségével elküldjük a szervernek a led új álapotát. Utánna a get() függvénnyel lekérjük a led aktuális állapotát és átadjuk a rejtett html elemnek.
$("#ledsw itch_button").click(function() {
str = $("#led_status").val();
if(str == "true") {
$("#ledswitch_button").text("Kapcsold be a ledet!");
}
else {
$("#ledswitch_button").text("Kapcsold ki a ledet!");
}
$.post("ledswitch", {
led: str
});
$.get("ledvalue", function(data) {
$('#led_status').val(data);
});
});A server.on(„/ledswitch”, HTTP_POST, ….}) függvény fogadja a led kapcsolásához használt gomb által elküldött eseményt. Itt történik a led ki vagy bekapcsolása, valamint beállítjuk a led állapotát tároló változó értékét.
Bár a jQuery sokkal többre képes mint ami ebben a példában bemutatásra került, remélem segít megérteni, hogy működik együtt a jQuery ajax és az ESPAsyncWebServer.