Question

我希望使用 Nodemcu 发送和接收数据，如果我在浏览器地址栏上输入，但不在自己的网页上输入，则可以正常工作

即如果我enter 192.168.1.14/But1（或But2）工作正常但是使用下面的网页会显示状态returns 0和no data。 NodeMCU 接收正常，如串行监视器所示我希望有许多不同的页面可以访问Web服务器，所以不想从 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>

Answer 1

经过大量搜索后问题解决了。以防万一这可能有助于其他人看到解决方案

问题是由不同的域名引起的。

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

现在，当页面加载时，它将从NodeMCU中获取“ mydata”并显示在在网页上的“ indata”中，您还可以随时添加refreshIframe（）例程以更新它，而无需重新加载页面。

希望这可能对您有帮助

将Ajax请求返回到网页/网址行

1 个答案: