Я пытаюсь отправить форму без обновления всей страницы, используя метод jQuery ajax.Сервер находится на ESP32 и был создан с использованием библиотеки ESPAsyncWebServer .
Допустим, я "отправляю" 5 как яркость.На последовательном мониторе я получаю следующее:
POST[getURL]:
POST[getBrightness]: 5
POST[getRefreshRate]:
Не имеет значения, в каком поле ввода я «отправляю».Проблема в том, что каждый «отправить» добавляет еще один POST к предыдущему.
После второго раза, когда я нажимаю «отправить» (в моем случае, работают обе кнопки ENTER), я получу:
POST[getURL]:
POST[getBrightness]: 5
POST[getRefreshRate]:
POST[getURL]:
POST[getBrightness]: 5
POST[getRefreshRate]:
Он добавляет на основе этой формулы 1, 2, 4, 8, 16 ...
И так до тех пор, пока я больше не смогу отправить (нажатие кнопки ENTER ничего не делает),сбой сервера или зависание Chrome.
Это HTML-страница, содержащая скрипт jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "master.css">
<link rel = "stylesheet" type = "text/css" href = "style_url.css">
<title>Config</title>
<script type="text/javascript" src="jquery-1.12.5.min.js"></script>
<script>
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
$("#text-input").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
</script>
</head>
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form id="myform" method="post" action="/config">
<div id="box-box">
<div id = "textbox" >
<input id="text-input" type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input id="text-input" type="number" min="2" max="99" placeholder="Enter Brightness (2-99)" name="getBrightness" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input id="text-input" type="number" min="999" max="10000" placeholder="Enter URL Refresh Time (ms)" name="getRefreshRate" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
</html>
И это то, что написано на стороне сервера:
server.on("/config", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/configPage.html", "text/html");
});
server.on("/config", HTTP_POST, [](AsyncWebServerRequest * request){
int params = request->params();
String urlCopy = "";
for(int i=0;i<params;i++){
AsyncWebParameter* p = request->getParam(i);
if(p->isPost()){
logOutput((String)"POST[" + p->name().c_str() + "]: " + p->value().c_str() + "\n");
if(p->name() == "getURL" && p->value() != NULL) urlCopy = p->value();
if(p->name() == "getBrightness" && p->value() != NULL) Brightness = p->value();
if(p->name() == "getRefreshRate" && p->value() != NULL) urlRefreshRate = p->value();
} else {
logOutput((String)"GET[" + p->name().c_str() + "]: " + p->value().c_str() + "\n");
}
} // for(int i=0;i<params;i++)
if(urlCopy != NULL && urlCopy.length() != 0) {
request->redirect("/logs"); //-redirect to a LOG html page
} else {
request->redirect("/config"); //-redirect to the same page
}
});