Go Down

Topic: Return Ajax request to web page / not url line (Read 480 times) previous topic - next topic

kev1953

Hi, I wish to send and receive data with a Nodemcu, works fine if I enter on browser address bar, but not on my own web page

i.e. if I enter 192.168.1.14/But1 (or But2) works fine
But using the web page below it shows the status returns 0 And no data
The NodeMCU is receiving OK as shown on the serial monitor
Any idear Please
Sorry do not know how to add code corectley here

NodeMCU program

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
 
// Replace with your network
const char* ssid = "xxxxxxxxxx";
const char* password = "xxxxxxxxxxxxx";
ESP8266WebServer server(80);   //instantiate server at port 80 (http port)
 
void setup(void){
 delay(1000);
 Serial.begin(115200);
 WiFi.begin(ssid, password); //begin WiFi connection
 Serial.println("");
 
 // Wait for connection
 while (WiFi.status() != WL_CONNECTED) {
 delay(500);
 Serial.print(".");
}
 
 Serial.println("");
 Serial.print("Connected to ");
 Serial.println(ssid);
 Serial.print("IP address: ");
 Serial.println(WiFi.localIP());
 
 server.on("/But1", [](){
   Serial.println("But1");
   server.send(200, "text/html", "But1_Click");   
 });

 server.on("/But2", [](){
   Serial.println("But2");
   server.send(200, "text/html", "But2_Click");   
 });
 
 server.begin();
 Serial.println("Web server started!");
}
 
void loop(void){
 server.handleClient();
}



Web page

<!DOCTYPE html>
<html>
<head>   
<script>

function sendAJAX(name) {   
   
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'http://192.168.1.14/'+name, true);

myRequest.onreadystatechange = function () {
    if (myRequest.readyState === 4) { // && this.status == 200) {
       document.getElementById('readyState1').innerHTML = myRequest.readyState;
        document.getElementById('status1').innerHTML =  this.status;
       document.getElementById('ajax-content').innerHTML = myRequest.responseText;
    }
};
    myRequest.send();
}
</script>
   </head>
   
   <body>
    <h1>AJAX Test</h1>
    <button onclick="sendAJAX('But1')">Button 1</button>
   <button onclick="sendAJAX('But2')">Button 2</button>
   <p id="readyState1">Ready</p>
   <p id="status1">Status</p>
    <div id="ajax-content">Reply</div>
</body>
</html>


Juraj

you expect json in browser but do not send it from server.

build a json string in server.on handlers and send it instead of "But_Click".
You can't write an Arduino sketch if you didn't learn programming. Not the language, but the concepts of programming - algorithms and data types.

kev1953

Thanks for you reply
I have not used json before but have tried this, don't know if this is what you mean
but still get same result ?

Code: [Select]


  #include <ArduinoJson.h>

  server.on("/But2", [](){
  String json = "{\"Item1\":\"Value1\"}";
  server.send(200, "application/json", json);
  Serial.println(json);
 })

Juraj

but you expect readyState and responseText to be in the json string
You can't write an Arduino sketch if you didn't learn programming. Not the language, but the concepts of programming - algorithms and data types.

kev1953

Problem solved after much searching. Just in case this may help others see solution   ;)

The problem was caused by different domain name.

1 Solution add an iframe to web page,

 <p><iframe name="ifdata" src="http://192.168.1.15"></iframe></p> // address of your NodeMCU
 can be set to style="width:0; height:0; border:0; border:none" so it will not be shown.

2 On server add, (mydata is a String holding the data)

 client.println("<html><head></head><body>");
 client.println("<script>top.postMessage('"+mydata+"', 'Web Page Domain');
 </script>");
 client.println("</body></html>");

 // Or equivalent server.on("/", [](){xxxx} send.
 // This will send your data (mydata) to the calling web page using the postMessage
 //   method

3 Add <div>indata</div> to the web page so it can be displayed

4 Add Javascript to web page to receive the post.

 function receiveMessage(event)
 {
    if (event.origin !== "http://192.168.1.15") { // address of your NodeMCU
     return;
   }
 document.getElementById('indata').innerHTML = event.data; // store data
 }
 window.addEventListener("message", receiveMessage, false);  // add Listner
Now when the page loads it will fetch the "mydata" from the NodeMCU and display it in "indata" on the web page, you can also add refreshIframe() routine to updat it at any time with out re loading the page.

Hope this may help

Go Up