Question

我正在尝试使用ESP32制作WiFi网络扫描仪。这是我计划构建的基本示例：

  server.on("/scan", HTTP_GET, [](AsyncWebServerRequest *request){
  String json = "[";
  int n = WiFi.scanComplete();
  if(n == -2){
    WiFi.scanNetworks(true);
  } else if(n){
    for (int i = 0; i < n; ++i){
      if(i) json += ",";
      json += "{";
      json += "\"rssi\":"+String(WiFi.RSSI(i));
      json += ",\"ssid\":\""+WiFi.SSID(i)+"\"";
      json += ",\"bssid\":\""+WiFi.BSSIDstr(i)+"\"";
      json += ",\"channel\":"+String(WiFi.channel(i));
      json += ",\"secure\":"+String(WiFi.encryptionType(i));
      json += "}";
    }
    WiFi.scanDelete();
    if(WiFi.scanComplete() == -2){
      WiFi.scanNetworks(true);
    }
  }
  json += "]";
  request->send(200, "application/json", json);
  json = String();
  });

我的想法是制作一个动态生成的列表，我也可以将其应用于CSS。由于这是一台网络扫描仪，因此我无法预先知道ESP可以找到的网络数量。

但是在扫描之后，我可以将找到的网络数放入变量中：

WiFi.scanNetworks(true);
int n = WiFi.scanComplete();

但这正在CPP文件中运行。与服务器或HTML无关。

但是，我可以使用PROGMEM来构建我的页面。我还可以使用占位符替换一些变量或字符串。而且我可以通过将页面分成碎片来构建页面。

String index_html PROGMEM = "<!DOCTYPE html><html> <head>";
index_html += "<meta charset=\"utf-8\">"
// etc

这是服务器处理程序的外观：

  server.on("/IP-Config", HTTP_GET, [](AsyncWebServerRequest *request){
    String index_html PROGMEM = "";
    index_html += "";
    // ...
    index_html += "";
    request->send_P(200, "text/html", index_html.c_str());
  });

我的问题是我只掌握JavaScript，jQuery和AJAX的基本知识，因此我上网寻找如何在没有元素数量的情况下生成无序列表，而我发现this ：

var str = '<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>';

for(var i in $yourArray){
   str += '<li><a href="#">String 1</a></li>';
}

str += '</ul>';

$('body').append(str);

通过简单的观察，我可以看到这种生成列表的方式还将字符串连接在一起。

所以，我真的很头晕，想弄清楚如何将所有这些组合到一个有效的网页中。

如何连接这么多字符串，使它们最终变得有意义并真正起作用？

更不用说我还考虑过每10秒刷新一次列表，以便像智能手机一样查看是否有网络出现或消失。

是否可以将数据从服务器发送到HTML页面，然后再发送回服务器？

0 个答案: