javascript 尝试将数据发送到ESP8266 Web服务器页面和从ESP8266 Web服务器页面接收数据(需要帮助)

我正在做一个自动化项目。我被困在从我的网页获取数据（按下按钮时的向上向下数值）返回到ESP。我已成功地将数据从ESP发送到网页。我正在开发一个控制ESP的Web应用程序。我面临的问题是，当我按下按钮或按下ENTER命令时，如何接收数字框值（在网页上）在那个盒子里，并发送给我的esp。如果任何人有任何想法，那么请与我分享。
已经在网上搜索了多个例子，还没有找到任何解决方案...
我使用的HTML文件：

<!DOCTYPE html>
<html>
<!-- Uncomment line below to use the 5 sec. refresh in the browser.. -->
<!-- <meta http-equiv="refresh" content="5" /> -->

<head>
    <!-- Tabblad Title in the browser -->
    <title>Web Page SEND and RECEIVE Test - &copy; 2023</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />

    <!-- <link rel="stylesheet" type="text/css" href="styles.css" > -->

    <!-- <script type="text/javascript" src="functions.js"></script> -->

    <!-- Start of HTML Styles used -->
    <style>
        /* Default HTML Styles used */
        html {
            font-family: Helvetica, Arial, Sans-serif;
            display: inline-block;
            margin: 0px auto;
            text-align: center;
        }

        /* Styles used in the Body*/
        body {
            min-width: 1000px;
            width: 1000px;
            height: 800;
        }

        #btnOneDirect {
            background-color: #42d1f5;
            border: none;
            color: white;
            padding: 8px 8px;
            border-radius: 9px;
            text-decoration: none;
            font-size: 20px;
            margin: 2px;
            cursor: pointer;
            width: 110px;
            height: 43px;
        }

        #btnTwoDirect {
            background-color: #f542a4;
            border: none;
            color: white;
            padding: 8px 8px;
            border-radius: 9px;
            text-decoration: none;
            font-size: 20px;
            margin: 2px;
            cursor: pointer;
            width: 110px;
            height: 43px;
        }

        /* End of HTML Styles used */
    </style>
</head>

<body>
    <header>
        <!-- Display the Header of the Web Page -->
        <h2>
            <span>Wemos-D1 mini PRO - Web Page SEND and RECEIVE Test</span>
        </h2>

        <h4>
            <span>Connected by WiFi - </span>
            <span id="cnct-info"></span>
        </h4>
    </header>

    <!-- The HTML Main (Page) -->
    <div>
        <div style="vertical-align: top; overflow: hidden">
            <a href="#"><button class="btnOneDirect" id="btnOneDirect" onclick="directOneBtnOnClick()">DIRECT-1</button></a>
        </div>

        <br><br>

        <div style="vertical-align: center; overflow: hidden">
            <label style="font-size: 20px; font-weight: 700; color: #000000">Manual</label>
            <input type="number" class="GenOneUDMan" id="GenOneUDMan" onchange="genoneudmanOnChange()"
                name="GenOneUDMan" min="0" max="12000000" step="100" value="1000000"
                style="width: 200px; font-size: 20px; font-weight: 700; color: #1100ff" />
        </div>

        <br><br>

        <div style="vertical-align: top; overflow: hidden">
            <a href="#"><button class="btnTwoDirect" id="btnTwoDirect" onclick="directTwoBtnOnClick()">DIRECT-2</button></a>
        </div>

        <br><br>

        <div style="vertical-align: center; overflow: hidden">
            <label style="font-size: 20px; font-weight: 700; color: #000000">Manual</label>
            <input type="number" class="GenTwoUDMan" id="GenTwoUDMan" onchange="gentwoudmanOnChange()"
                name="GenTwoUDMan" min="0" max="12000000" step="100" value="2000000"
                style="width: 200px; font-size: 20px; font-weight: 700; color: #1100ff" />
        </div>
    </div>

    <footer>
        <!-- Display the Footer of the Web Page -->
    </footer>

    <script>
        // Header JavaScript Functions

        // *******************************************
        // Send data from ESP8266 to use on WebPage,
        // and Receive data from WebPage to use on ESP8266
        // *******************************************
        // Handle HTML-Form Functions
        console.log("Javascript is running !!");

        // Display Reception from ESP8266 - Header Connection Info
        setInterval(function () {
            var xhttp0 = new XMLHttpRequest();
            xhttp0.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("cnct-info").innerHTML = this.responseText;
                }
            };
            xhttp0.open("GET", "/cnct-info", true);
            xhttp0.send();
        }, 5000); // Every 5 secs.

        // // *******************************************
        // // Send data from WebPage to use on ESP8266
        // // *******************************************
        function directOneBtnOnClick() {
            console.log("directOneBtnOnClick has been Clicked !!");
            var waarde = document.getElementById("GenOneUDMan").value;
            console.log("waarde=" + waarde);

            var xhttp1 = new XMLHttpRequest();
            xhttp1.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("btnOneDirect").innerHTML = this.responseText;
                }
            };
            xhttp1.open("GET", "/btnOneDirect", true);
            xhttp1.send();
        }

        function directTwoBtnOnClick() {
            console.log("directTwoBtnOnClick has been Clicked !!");
            var waarde = document.getElementById("GenTwoUDMan").value;
            console.log("waarde=" + waarde);

            var xhttp2 = new XMLHttpRequest();
            xhttp2.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("btnTwoDirect").innerHTML = this.responseText;
                }
            };
            xhttp2.open("GET", "/btnTwoDirect", true);
            xhttp2.send();
        }

        function genoneudmanOnChange() {
            // (event.keyCode === 13) <ENTER> wordt ook als onchange gedetecteerd
            var Gen_OneUD_Man = parseInt(document.getElementById("GenOneUDMan").value);

            document.getElementById("GenOneUDMan").value = Gen_OneUD_Man;

            console.log("genoneudmanOnChange has been Changed to : " + Gen_OneUD_Man + " !!");
        }

        function gentwoudmanOnChange() {
            // (event.keyCode === 13) <ENTER> wordt ook als onchange gedetecteerd
            var Gen_TwoUD_Man = parseInt(document.getElementById("GenTwoUDMan").value);

            document.getElementById("GenTwoUDMan").value = Gen_TwoUD_Man;

            console.log("gentwoudmanOnChange has been Changed to : " + Gen_TwoUD_Man + " !!");
        }

    </script>
</body>

</html>

我使用的ESP8266文件：

// New Wemos_D1_Mini_Web_Test Project
// LastVers. - 02-03-2023  Wemos_D1_Mini_Web_Test, Start

// Used Typedef's
// uint8            = 1 Byte = (unsigned) char / byte (0 .. 255)
// uint16           = 2 Byte = (unsigned) short / word  (0 .. 65.535)
// uint32           = 4 Byte = (unsigned) int / long (0 .. 4.294.967.295)
// sint8   or int8  = 1 Byte = (signed) char / byte (-128 .. 127)
// sint16           = 2 Byte = (signed) short / word (-32.768 .. +32.767)
// sint32  or int32 = 4 Byte = (signed)  int / long (-2.147.483.648 .. +2.147.483.647)
// real32           = 4 Byte = float (-3,4028235e38 .. +3,4028235e38) (Always Signed, Precision 6 decimal places)
// real64           = 8 Byte = double (-1,7e308 .. +1,7e308) (Always Signed, Precision 15 decimal places)

#include <Arduino.h>  // If there is NO Problem !!! IGNORE !!!

String VersionInfo = " 02-03-2023.R01 ";
#define Baud_USB 115200

/* tbv WiFi - overgenomen van Wemos_D1_Mini_CC_CP_CR_BattCap Tool */
#include <ESP8266WiFi.h>
#include <WiFiUdp.h>

#include <ESP8266WebServer.h>                     // tbv WiFiManager

#include <DNSServer.h>                            // tbv WiFiManager
#include <WiFiManager.h>                          // tbv WiFiManager

ESP8266WebServer server(80);                      // 80 is the port number (New)

// Website Display Labels - Actual NTP time & date & SummerWinter Time & ConnectInfo , ALL updated in TimeKeeping()
String  connectInfo                 = "";         // tbv WebPage weergave SSID & RSSI info
String  WebLblConnect               = "";

/***** OnDevice Flash System *****/
#include <FS.h>
// What Filesystem to use ??
#define FS_SPIFFS

#ifdef FS_SPIFFS
  // Using SPIFFS
  //   no extra includes needed
#else
  // NOT Using SPIFFS, but littleFS
  #include <LittleFS.h>
#endif

/***** tbv Reset function at address 0 (from within the Application) *****/
void(* resetFunc) (void) = 0;           // Declare Reset function at address 0

/*****************************************/
/***** DEBUG_PRINT FILE_SYSTEM MACRO *****/
/*****************************************/
// ? Uncomment to enable printing out nice debug messages.
// ? #define FILE_SYST_DEBUG
// #define FILE_SYST_DEBUG

// Define where debug output will be printed.
#define FILE_SYST_PRINTER Serial

// Setup DEBUG printing MACRO
#ifdef FILE_SYST_DEBUG
  #define FS_DEBUG_PRINT(...) { FILE_SYST_PRINTER.print(__VA_ARGS__); }
  #define FS_DEBUG_PRINTLN(...) { FILE_SYST_PRINTER.println(__VA_ARGS__); }
#else
  #define FS_DEBUG_PRINT(...) {}
  #define FS_DEBUG_PRINTLN(...) {}
#endif

/*******************************************************/
/***** SETUP Instellingen - Print Config to Serial *****/
/*******************************************************/
bool printStartup = true;

/**********************************************************/
/***** tbv WebServer - Sending DATA to the WEBPAGE !! *****/
/**********************************************************/
void UpdateCnctInfoLabels() {
  server.send(200, "text/plain", WebLblConnect);
  yield();
}

// Display the WebPage from the SPIFFS memory
void ServeWebMainFile() {
  #ifdef FS_SPIFFS
    File file = SPIFFS.open("/index.html", "r");
  #else
    File file = LittleFS.open("/index.html", "r");
  #endif
  server.streamFile(file, "text/html");
  file.close();
}

/************************************************************/
/***** tbv WebServer - Receive DATA from the WebPage !! *****/
/************************************************************/
// Receive data from WebPage
void PerformWeb_ButtonOnePress() {
  //
  String act_state = server.arg("btnOneDirect");
  // String act_state = server.arg("/GenFreqUDMan");
  Serial.println("PerformWeb_ButtonOnePress function has been called !!");
  Serial.println("server.arg = " + act_state);
  yield();
}

void PerformWeb_ButtonTwoPress() {
  //
  String act_state = server.arg("btnTwoDirect");
  // String act_state = server.arg("/GenFreqUDMan");
  Serial.println("PerformWeb_ButtonTwoPress function has been called !!");
  Serial.println("server.arg = " + act_state);
  yield();
}

/*******************************************************************/
/***** Print Contents of FlashDrive tbv LittleFS And/Or SPIFFS *****/
/*******************************************************************/
void listDir(const char * dirname) {
  #ifdef FILE_SYST_DEBUG
    char Fs_Buf[50];
    #ifdef FS_SPIFFS

      sprintf(Fs_Buf, "\nSPIFFS FileSystem:\nListing directory: %s", dirname);
      FS_DEBUG_PRINTLN(Fs_Buf);
      Dir root = SPIFFS.openDir(dirname);
    #else
      sprintf(Fs_Buf, "\nLittleFS FileSystem:\nListing directory: %s", dirname);
      FS_DEBUG_PRINTLN(Fs_Buf);
      Dir root = LittleFS.openDir(dirname);
    #endif

    while (root.next()) {
      File file = root.openFile("r");
      FS_DEBUG_PRINT("  FILE: ");
      FS_DEBUG_PRINT(root.fileName());
      FS_DEBUG_PRINT("  SIZE: ");
      FS_DEBUG_PRINT(file.size());
      time_t cr = file.getCreationTime();
      time_t lw = file.getLastWrite();
      file.close();
      struct tm * tmstruct = localtime(&cr);
      sprintf(Fs_Buf, "\n    \tCREATION:   %d-%02d-%02d %02d:%02d:%02d", (tmstruct->tm_year) + 1900, (tmstruct->tm_mon) + 1, tmstruct->tm_mday, tmstruct->tm_hour, tmstruct->tm_min, tmstruct->tm_sec);
      FS_DEBUG_PRINT(Fs_Buf);
      tmstruct = localtime(&lw);
      sprintf(Fs_Buf, "\n    \tLAST WRITE: %d-%02d-%02d %02d:%02d:%02d\n", (tmstruct->tm_year) + 1900, (tmstruct->tm_mon) + 1, tmstruct->tm_mday, tmstruct->tm_hour, tmstruct->tm_min, tmstruct->tm_sec);
      FS_DEBUG_PRINT(Fs_Buf);
    }
  #endif
}

/**************************************************/
/***** Reset Function for the Wemos-D1 Device *****/
/**************************************************/
void PerformWeb_WiFiReInitialize() {
  server.stop();
  
  WiFiManager wifiManager;            // ReInitialize wifiManager Object to be able to Reset WiFi Settings
  
  wifiManager.resetSettings();        // Reset the curent WiFi Settings
  resetFunc();                        // Call the Reset Function
}

void PerformWeb_DeviceRestart() {
  server.stop();
  resetFunc();                        // Call the Reset Function
}

/*************************************/
/***** SETUP the Wemos-D1 Device *****/
/*************************************/
void setup()
{
  /**************************************************/
  /***** USB-Serial Port - Wemos-D1 Board Setup *****/
  /**************************************************/
  Serial.begin(Baud_USB);

  while (!Serial) {
    ; // Wait for serial port (USB) to connect. 
  }
  Serial.println();

  /*******************************************************************************/
  /***** WiFiManager - mna_AP_FreqGenCnt_Manager Setup *****/
  /*******************************************************************************/
  // WiFiManager Initialisation
  WiFiManager wifiManager;

  // WiFiManager setDebugInfo (true or false)
  wifiManager.setDebugOutput(false);

  // Set TimeOut until the Configuration Portal gets turned OFF (in Sec.)
  wifiManager.setTimeout(120UL);

  // Sets the minimum Signal Quality, will NOT show sign ON networks below the set value, 
  //   default is set to 8% (so uou will see a lot of networks !!!)
  wifiManager.setMinimumSignalQuality(30);  // Min. RSSI Quality = 30%

  // Disable sleep, can improve Access Point stability
  WiFi.setSleepMode(WIFI_NONE_SLEEP); 

  if (!wifiManager.autoConnect("mna_AP_FreqGenCnt_Manager", "")) {
    if (printStartup == true) {
      Serial.println("Failed to connect and hit TimeOut");
      delay(3000);
      // Reset and Try again 
      //   the complete Program will be Restarted Now...(as if it was Powered UP again)
      ESP.reset();
      delay(5000);
    }
  }

  /******************************************************************************/
  /***** WiFi does Exist NOW !!, Display WiFi Application & Connection Info *****/
  /******************************************************************************/
  // Start the FileSystem on (the Internal) Flash
  #ifdef FS_SPIFFS
    if (!SPIFFS.begin()) {
      #ifdef FILE_SYST_DEBUG 
        FS_DEBUG_PRINTLN("\nSPIFFS mount failed");
      #endif
      return;
    } else {
      #ifdef FILE_SYST_DEBUG 
        FS_DEBUG_PRINTLN("\nSPIFFS mount Succeeded");
      #endif
    }   
  #else
    if (!LittleFS.begin()) {
      #ifdef FILE_SYST_DEBUG 
        FS_DEBUG_PRINTLN("\nLittleFS mount failed");
      #endif
      return;
    } else {
      #ifdef FILE_SYST_DEBUG 
        FS_DEBUG_PRINTLN("\nLittleFS mount Succeeded");
      #endif
    }
  #endif
  listDir("/");
  Serial.flush();

  /************************************************/
  /***** WebPages (or functions) of the WebServer */
  /************************************************/
  server.on("/", ServeWebMainFile);                       // Main WebPage Screen function

  server.on("/btnOneDirect", PerformWeb_ButtonOnePress);  // Perform Action on pressing DIRECT-1 button on Webpage
  server.on("/btnTwoDirect", PerformWeb_ButtonTwoPress);  // Perform Action on pressing DIRECT-2 button on Webpage

  server.on("/cnct-info",UpdateCnctInfoLabels);           // Connection Info label in the Header

  // Now Start of the (Device local) WebServer
  server.begin();

  /**********************************************/
  /***** Start showing the Application Info *****/
  /**********************************************/
  if (printStartup == true) {
    Serial.println();
    Serial.println();
    Serial.println("***** mna_AP_Web_Test_Manager - Board Startup Message *****");
    Serial.print("Connected to     : ");
    Serial.println(WiFi.SSID());
    Serial.print("IP gateway       : ");              
    Serial.println(WiFi.gatewayIP());
    Serial.print("IP subnet        : ");              
    Serial.println(WiFi.subnetMask());
    Serial.print("IP address       : ");              
    Serial.println(WiFi.localIP());
    Serial.println("HTTP server      : Started");
    Serial.println("--------------------------------------------------------------------");     
    Serial.flush();
  }

}

void loop()
{
  /***************************************************/
  /***** WebSite handling on the Wemos-D1 Device *****/
  /***************************************************/
  server.handleClient();
  yield();

  // Update WebLblConnect information..
  WebLblConnect = "SSID : " + WiFi.SSID() + " - LocalIP : " + WiFi.localIP().toString() + " - RSSI : " + (String)WiFi.RSSI() + " dBm";
}

javascript 尝试将数据发送到ESP8266 Web服务器页面和从ESP8266 Web服务器页面接收数据(需要帮助)

1条答案

相关问题

热门标签

最新问答