Hi, I have setup a webpage with ajax to connect to a db and return a json with some data.
I need now to retrieve the json data but I'm not clear on how to do it with the ESP8266WebServer library and with the server.on() method.
I checked the documentation but couldn't find example with json file.
this is the full code so if you load it on your nodemcu it will work
#define DEBUG
#ifdef DEBUG
#define SB(...) Serial.begin(__VA_ARGS__)
#define SP(...) Serial.print(__VA_ARGS__)
#define SPL(...) Serial.println(__VA_ARGS__)
#else
#define SB(...)
#define SP(...)
#define SPL(...)
#endif
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
const char* ssid = "";
const char* password = "";
ESP8266WebServer server(80); //instantiate server at port 80 (http port)
IPAddress ip(192, 168, 1, 7); // where xx is the desired IP Address
IPAddress gateway(192, 168, 1, 1); // set gateway to match your network
IPAddress subnet(255, 255, 255, 0); // set subnet mask to match your network
String page = "";
void setup(void){
page="<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8'/>"
"<meta name='viewport' content='width=device-width, initial-scale=1'>"
"<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />"
"<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css' integrity='sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B' crossorigin='anonymous'>"
"<link rel='stylesheet' type='text/css' href='http://www.francescosoave.com/blind/style.css'>"
"<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js' type='text/javascript'></script>"
"<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>"
"</head>"
"<body>"
"<div class='container'>"
"<div class='row'>"
"<table class='table' id='radioForm'>"
"<thead>"
"<tr><th>Blind</th></tr>"
"</thead>"
"<tbody>"
"<tr><td align='center'>"
"<input id='1' type='radio' name='radioBtn' value='1' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='2' type='radio' name='radioBtn' value='2' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='3' type='radio' name='radioBtn' value='3' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='4' type='radio' name='radioBtn' value='4' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='5' type='radio' name='radioBtn' value='5' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='6' type='radio' name='radioBtn' value='6' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='7' type='radio' name='radioBtn' value='7' />"
"</td></tr>"
"<tr><td align='center'>"
"<input id='timer' name='timerBtn' type='button'>"
"
"
"<p>Timer is <span id='timerMsg'></span></p>"
"</td></tr>"
"</tbody>"
"</table>"
"</div>"
"</div>"
"<script>"
"$( document ).ready(function() {"
"$.ajax({"
"type: 'GET',"
"dataType: 'jsonp', "
"url: 'http://www.francescosoave.com/blind/DBread.php',"
"data: {'pw':'Blind4r'}, "
"success: function(jsonObj) {"
"$('#' + jsonObj[0].cur_pos).prop('checked', true);"
"if(jsonObj[0].timer == 0){"
"$('#timer').attr({"
"'class': 'btn btn-success',"
"value: 'TURN ON'"
"});"
"$('#timerMsg').html('off');"
"}else{"
"$('#timer').attr({"
"'class': 'btn btn-danger',"
"value: 'TURN OFF'"
"});"
"$('#timerMsg').html('on');"
"}"
"},"
"error: function(jsonObj){"
"}"
"});"
"setInterval(function(){"
"$('#timerMsg').fadeOut(function () {"
"$(this).fadeIn();"
"});"
"} ,1000);"
"});"
"$('#timer').on('click', function() {"
"$.ajax({"
"type: 'GET',"
"dataType: 'jsonp', "
"url: 'http://www.francescosoave.com/blind/DBtimer.php',"
"data: {'pw':'Blind4r'},"
"success: function(jsonObj) { "
"if(jsonObj[0].timer == 1){"
"$('#timer').attr({"
"'class': 'btn btn-danger',"
"value: 'TURN OFF'"
"});"
"$('#timerMsg').html('on');"
"}else{"
"$('#timer').attr({"
"'class': 'btn btn-success',"
"value: 'TURN ON'"
"});"
"$('#timerMsg').html('off');"
"}"
"},"
"error: function(jsonObj){"
"}"
"});"
"});"
"$('#radioForm input').on('change', function() {"
"var timer_val = $('input[name=radioBtn]:checked', '#radioForm').val();"
"$.ajax({"
"type: 'GET',"
"dataType: 'jsonp', "
"url: 'http://www.francescosoave.com/blind/DBradio.php', "
"data: {'pw':'Blind4r', 'radio':timer_val}, "
"success: function(jsonObj) { "
"},"
"error: function(jsonObj){"
"}"
"});"
"});"
"</script>"
"</body>"
"</html>";
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, LOW);
WiFi.config(ip, gateway, subnet);
delay(1000);
SB(115200);
WiFi.begin(ssid, password); //begin WiFi connection
delay(1000);
SPL();
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
digitalWrite(LED_BUILTIN, HIGH);
delay(500);
SP("waiting for connection.");
digitalWrite(LED_BUILTIN, LOW);
}
SPL();
SP("Connected to ");
SPL(ssid);
SP("IP address: ");
SPL(WiFi.localIP());
server.on("/", [](){
server.send(200, "text/html", page);
});
// server.on("/LEDOn", [](){
// server.send(200, "text/html", page);
// digitalWrite(LED_BUILTIN, HIGH);
// delay(1000);
// });
// server.on("/LEDOff", [](){
// server.send(200, "text/html", page);
// digitalWrite(LED_BUILTIN, LOW);
// delay(1000);
// });
server.begin();
SPL("Web server started!");
}
void loop(void){
server.handleClient();
}
The ajax is successfully returning the json (tested in browser) I just don't get how to access it from here.
Thanks!
L.