0
我最近在学习如何在的Arduino编程到主机上的Adafruit的好哇ESP8266一个HTML/CSS/JavaScript的网页突围芯片，所以请原谅我，如果我的方法在这里完全关闭。如何使用Ajax和setInterval上ESP8266 HTML网页送达的Arduino
我目前正试图得到一个值与使用的setInterval以每五秒钟运行JavaScript函数通过AJAX自动更新。尽管它至少更新一次该值，但这样做的时间要比五秒钟长，然后它不会再次更新该值。
请让我知道你对我目前试图实现这一点的方式有何看法，如果我远离标记？帮助你导航的关键功能是loadNum（）和sendNum（）;并且递增的变量是testNumPart2（这里还有更多的代码以及使用按钮打开/关闭LED的按钮）。
谢谢！
#include <ESP8266WiFi.h>
#define LED_PIN 15 // This example assumes you have a LED connected to pin 13
const char* ssid = "REDACTED";
const char* password = "REDACTED";
// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// prepare GPIO2
pinMode(LED_PIN, OUTPUT);
//digitalWrite(2, 0);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.println(WiFi.localIP());
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
String currentLine = "";
String LEDstatus = "off";
String testNumPart1 = "document.getElementById('demo').innerHTML = ";
int testNumPart2 = 23;
String testNum = testNumPart1 + testNumPart2;
//Serial.print("TEST: ");
//Serial.println(testNum);
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
testNumPart2++;
testNum = testNumPart1 + testNumPart2;
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
//client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title>Adafruit HUZZAH ESP8266</title>");
client.println("<style type='text/css'>");
//Styles for on/off switch
client.println(".onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }");
client.println(".onoffswitch-checkbox { display: none; }");
client.println(".onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; }");
client.println(".onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}");
client.println(".onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }");
client.println(".onoffswitch-inner:before { content: 'ON'; padding-left: 10px; background-color: #34A7C1; color: #FFFFFF; }");
client.println(".onoffswitch-inner:after { content: 'OFF'; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; }");
client.println(".onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; }");
client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }");
client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }");
client.println("</style>");
//Javascript Function
client.println("<script>");
client.println("function LEDswitch(){");
client.println("var LEDswitchCheck = document.getElementById('myonoffswitch').checked;");
client.println("if(LEDswitchCheck){");
client.println("window.location.href = '/H';");
client.println("}");
client.println("else {");
client.println("window.location.href = '/L';");
client.println("}");
client.println("}");
client.println("function loadNum() {");
client.println("setInterval(sendNum, 5000);");
client.println("}");
client.println("function sendNum() {");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println(testNum);
client.println("}");
client.println("}");
client.println("};");
client.println("request.open('GET', '', true);");
client.println("request.send();");
client.println("}");
client.println("</script>");
client.println("</head>");
client.println("<body style='background-color:#558C89;' onload=\"loadNum()\">");
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h1 style='text-decoration: underline;'>Adafruit HUZZAH ESP8266</h1>");
client.println("</div>");
}
if (c == '\n') {
// you're starting a new line
currentLineIsBlank = true;
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h2 style='color: red;'>LED Controls</h2>");
// The HTTP response ends with another blank line:
client.println();
client.println("<div class='onoffswitch'>");
if (LEDstatus == "on")
{
client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' checked='checked' onclick='LEDswitch()'>");
} //end if
else if(LEDstatus == "off")
{
client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' onclick='LEDswitch()'>");
} //end else
client.println("<label class='onoffswitch-label' for='myonoffswitch'>");
client.println("<span class='onoffswitch-inner'></span>");
client.println("<span class='onoffswitch-switch'></span>");
client.println("</label>");
client.println("</div>");
client.println("</div>");
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h2 style='color: green;'>Num Refresh Test</h2>");
client.println("<div id='demo'><h2>Let AJAX change this text</h2></div>");
//client.println("<button type='button' onclick='loadNum()'>Change Content</button>");
client.println("</div>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
break;
} //end if
else
{
currentLine = "";
} //end else
}
else if (c != '\r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
currentLine += c;
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(LED_PIN, HIGH); // GET /H turns the LED on
LEDstatus = "on";
} //end if (/H)
if (currentLine.endsWith("GET /L")) {
digitalWrite(LED_PIN, LOW); // GET /L turns the LED off
LEDstatus = "off";
} //end if (/L)
} //end if (client available)
} //end while
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println("client disconnected");
} //end if (client)
} //end void loop
我没有看到你的AJAX请求任何更新。您只需设置与加载页面时相同的编号。你完全忽略了你的AJAX调用返回的内容。 而我没有看到您的AJAX调用的任何URL。 –
那么这就是我不明白的东西，从我所了解的arduino中，我只能将单个arduino（.ino）文件上传到ESP8266，所以用ajax调用另一个文件似乎不可能？ 所以不是调用一个文件，而是试图调用一个变量，如果这是有道理的。您可以在文件的顶部看到我正在使用来自testNumPart2的增量值更新testNum。 –