Question

我是JavaScript和HTML的新手，我试图自学。我正在使用C ++创建一个Web服务器，但我遇到了HTML / JavaScript部分的问题。我希望能够更改每个部分的标签，然后能够将新值保存到板载EEPROM中。我目前无法弄清楚如何将字符串的值保存到我的C ++变量。如果可以，请帮忙，我知道这是一个奇怪的项目。

#include <ESP8266WiFi.h>

//////////////////////
// WiFi Definitions //
//////////////////////
const char WiFiAPPSK[] = "mathew";
const char ssid[]="Test1";
/////////////////////
// Pin Definitions //
/////////////////////
const int LED_PIN = 14; // Thing's onboard, green LED
const int LED2=12;
const int LED3=13;
const int ANALOG_PIN = A0; // The only analog pin on the Thing
const int DIGITAL_PIN = 12; // Digital pin to be read
char *head1="var head1=\"LED_1\";";
char *head2="var head2=\"LED_2\";";
char *head3="var head3=\"LED_3\";";
char *done ="var done=\"false\";";
WiFiServer server(80);

void setup() 
{
  initHardware();
  setupWiFi();
  server.begin();
}

void loop() 
{
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }

 // Read the first line of the request
  String req = client.readStringUntil('\r');
  Serial.println(req);
  client.flush();

 // Match the request
  int val = -1; // We'll use 'val' to keep track of both the
            // request type (read/set) and value if set.
  int val2 = -1;
  int val3 = -1;

  if (req.indexOf("?pin=OFF1") != -1)

    val = 1; // Will write LED high

  else if (req.indexOf("?pin=ON1") != -1)
    val = 0; 
  else if (req.indexOf("?pin=ON2") != -1)
    val2 = 0;
  else if (req.indexOf("?pin=OFF2") != -1)
    val2 = 1; 
  else if (req.indexOf("?pin=ON3") != -1)
    val3 = 0; 
  else if (req.indexOf("?pin=OFF3") != -1)
    val3 = 1; 
  else if (req.indexOf("/read") != -1)
    val = -2; 
  // Otherwise request will be invalid. We'll say as much in HTML

 // Set GPIO5 according to the request
  if (val >= 0)
    digitalWrite(LED_PIN, val);
  if (val2 >=0)
    digitalWrite(LED2, val2);
  if (val3 >=0)
    digitalWrite(LED3, val3);
  client.flush();

  // Prepare the response. Start with the common header:
  String s = "HTTP/1.1 200 OK\r\n";
  s += "Content-Type: text/html\r\n\r\n";
  s += "<!DOCTYPE HTML>\r\n<html>\r\n";
  s += "<head>";
  s += "<style>";
  s += "a {color: green;}";
  s += "a {font-size: 30px;}";
  s += "button {color: blue}";
  s += "button {font-size: 35px;}";
  s += "button {background-color: red;}";
  s += "</style>";
  s += "<script>";
  s += head1;
  s += head2;
  s += head3;
  s += "</script>";
  s += "<h1 id=Head1>header</H1>";
  s += "<div class=\"row\">";
  s += "<a href=\"?pin=ON1\"><button>ON</button></a><br>";
  s += "<a href=\"?pin=OFF1\"><button>OFF</button></a>";
  s += "<h1 id=Head2>header</H1>";
  s += "<a href=\"?pin=ON2\"><button>ON</button></a><br>";
  s += "<a href=\"?pin=OFF2\"><button>OFF</button></a>";
  s += "<h1 id=Head3>header</H1>";
  s += "<a href=\"?pin=ON3\"><button>ON</button></a>";
  s += "<a href=\"?pin=OFF3\"><button>OFF</button></a>";
  s += "<script>";
  s += "document.getElementById('Head1').innerHTML=head1;";
  s += "document.getElementById('Head2').innerHTML=head2;";
  s += "document.getElementById('Head3').innerHTML=head3;";
  s += "</script>";
  s += "<input type=\"text\" id=h1>";
  s += "<a href=<script>'document.getElementById('h1').textContent'</script>><button>GO</button></a>";

  s += "<script>";


  s += "</script>";
  s += "</div></div>";


  if (val == -2)
  { // If we're reading pins, print out those values:
  s += "Analog Pin = ";
  s += String(analogRead(ANALOG_PIN));
  s += "<br>"; // Go to the next line.
  s += "Digital Pin 12 = ";
  s += String(digitalRead(DIGITAL_PIN));
  }

  s += "</html>\n";

  // Send the response to the client
  client.print(s);
  delay(1);
  Serial.println("Client disonnected");


}

将Javascript字符串写入URL

0 个答案: