Возврат Ajax-запроса на веб-страницу / не URL-строку - PullRequest
Новая
       7

Возврат Ajax-запроса на веб-страницу / не URL-строку

0 голосов
/ 03 июля 2018

Я хочу отправлять и получать данные с Nodemcu , работает нормально, если я вхожу в адресную строку браузера, но не на собственной веб-странице

т.е. если я enter 192.168.1.14/But1 (или Бут2) работает нормально Но используя веб-страницу ниже, он показывает статус returns 0 И no data. NodeMCU получает ОК, как показано на последовательном мониторе Я хочу, чтобы несколько различных страниц обращались к веб-серверу, поэтому не хочу отправлять их с NodeMcu , чтобы их веб-адрес не совпадал с сервером

NodeMCU программа 

#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();
}

Веб-страница 

<!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>

1 Ответ

0 голосов
/ 07 июля 2018

Проблема решена после долгих поисков. На всякий случай это может помочь другим увидеть решение

Проблема была вызвана другим доменным именем. 

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

Теперь, когда страница загружается, она извлекает «mydata» из NodeMCU и отображает в «indata» на веб-странице, вы также можете добавить функцию refreshIframe (), чтобы обновить ее в любое время без повторной загрузки страницы.

Надеюсь, это поможет

...