如何在同一表单上执行 GET 和 POST 请求答案

【问题标题】：How to perform GET and POST requestion on same form如何在同一表单上执行 GET 和 POST 请求
【发布时间】：2022-04-21 01:43:41
【问题描述】：

我正在开发一个 Web 应用程序，我必须使用 GET 请求在表单中呈现复选框，然后使用 POST 请求将选定的表单数据返回给服务器。但是，一旦我使用 GET 请求收到复选框数据，我就无法执行发布请求。

我使用了 CherryPy Web 框架，这里是供您参考的代码。

HTML 代码片段

<div class=\"wrapper row2\">
  <div id=\"container\" class=\"clear\">
    <!-- Slider -->
    <section id=\"slider\">
      <div class=\"division\">
        <div style=\"width: 40%; height: 100px; float: left; font-size: 20px\">
          <form method=\"post\" action=\"processes\">
            <label for=\"storage\">Choose size:</label>
            <select name=\"post_storage\" id=\"storage\">
              <option value=\"1g\">1GB</option>
              <option value=\"5g\">5GB</option>
              <option value=\"8g\">8GB</option>
              <option value=\"10g\">10GB</option>
            </select>
            <br /><br />
            <label for=\"iodepth\">Choose iodepth:</label>
            <select name=\"post_iodepth\" id=\"iodepth\">
              <option value=\"15\">15</option>
              <option value=\"32\">32</option>
              <option value=\"40\">40</option>
              <option value=\"64\">64</option>
            </select>
            <br /><br />
            <label for=\"runtime\">Choose runtime:</label>
            <select name=\"post_runtime\" id=\"runtime\">
              <option value=\"750\">750</option>
              <option value=\"1000\">1000</option>
              <option value=\"1250\">1250</option>
              <option value=\"1700\">1700</option>
            </select>
            <br /><br />
            <label for=\"ramp_time\">Choose ramp_time:</label>
            <select name=\"post_ramp\" id=\"ramp_time\">
              <option value=\"1\">1</option>
              <option value=\"5\">5</option>
              <option value=\"8\">8</option>
              <option value=\"10\">10</option>
            </select>
            <br /><br />
            <label for=\"numjobs\">Choose number of jobs:</label>
            <select name=\"post_jobs\" id=\"numjobs\">
              <option value=\"1\">1</option>
              <option value=\"4\">4</option>
              <option value=\"8\">8</option>
              <option value=\"16\">16</option>
            </select>
        </div>
        <h6 style=\"margin: auto;\">Select the disks</h6>
        <div id=\"disknumbers\" style=\"margin-left: 40%; height: 100px; font-size: 18px\">
          <button type=\"submit\" id=\"disk\" style=\"display: none;\">
            Submit
          </button>
          </form>
        </div>
      </div>
    </section>
  </div>
</div>

我从 GET 请求中收到的所有复选框都将位于 div 标签内（div 标签 id=\"disknumbers\". 因此，在选择了所有必需的复选框后，我需要执行 POST 请求（我在按钮的帮助下提交了表单数据）必须在提交 POST 请求后立即完成，但它不起作用。

Javascript 代码（用于 GET 请求）

var i = 0;
var j = 0;
var count = 0;
window.onload = function() {
$.get(\"http://192.168.0.109:8080/g5\", function(data){
  count = parseInt(data);
  myFunc();
});
function myFunc() {
  const currentRequest = $.get(\"http://192.168.0.109:8080/u5\", function(datapoint){
document.getElementById(\"disknumbers\").innerHTML += \"<label for=\"+\"disk_\"+j+\">\"+\"<\"+\"input \"+\"type=\"+\"checkbox\"+\" id=\"+\"disk_\"+j+\" value=\"+datapoint+\" name=\"+\"post_name\"+\" class=\"+\"check\"+\">\"+datapoint+\"</label>\";
  });
  if (i < count-1){
    setTimeout(function(){myFunc()}, 1);
    i += 1;
    j += 1;
  } else{
    i = 0;
    j = 0;
 };
};};

POST 请求的 Javascript 代码

  const element = document.getElementById(\"build\");
  element.addEventListener(\"click\", myFunction);

  function myFunction() {
    document.getElementById(\"disk\").click();
  }

我希望有人理解这个问题。提前致谢。

您的 POST 示例代码中没有任何内容与发出任何类型的 HTTP 请求有关。
当我提交表单数据时，会发生 POST 请求，因为我在 html 表单标签中给出了 method = \"post\"\"。然后数据必须重定向到用cherryPy 编写的 \"processes\" 函数，而这不会发生。

标签： javascript jquery ajax cherrypy

【解决方案1】：

如果我明白你的意思..你可以使用addClass到按钮+:not选择器..见下一个例子

$(document).on("click" , "button#disk:not(.goPost)" , function(e){
  e.preventDefault();
  console.log("Chechboxes Added From Get request");
  $(this).addClass("goPost").text("Submit Now");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <button type="submit" id="disk">Add Checkbox</button>
</form>

【讨论】：

感谢你的回答。它对我有用。
很高兴听到@Nithish .. 有美好的一天?