Question

我正在尝试提交表单，而没有使用jQuery ajax方法刷新整个页面。该服务器位于ESP32上，并使用ESPAsyncWebServer库制作。

假设我“提交” 5作为“亮度”。我在串行监视器上得到以下信息：

POST[getURL]: 

POST[getBrightness]: 5

POST[getRefreshRate]:

我“提交”在哪个输入字段中都没有关系。问题在于，每个“提交”都会在前一个POST上添加一个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
        }
      });

Answer 1

更改代码如下：

<!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="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function () {
    $('.btn-submit').on('click', function(e) {
        console.log($(this).closest("form").attr('action'));
        $.ajax({
            url : $(this).closest("form").attr('action'), //$(this).attr('action') || window.location.pathname,
            type: "POST",
            data: $(this).closest("form").serialize(),
            success: function (data) {
                $("#text-input").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
        e.preventDefault();
    });
});
</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 class="btn-submit" type="button" 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 class="btn-submit" type="button" 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 class="btn-submit" type="button" value="Enter">
            </div>
        </form>
    </div>
</body>
</html>

在Web服务器上发布时，jQuery提交倍增

这是HTML页面，其中包含jQuery脚本：

这就是服务器端写的：

1 个答案: