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

Question

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

我使用的是 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;
 };
};};

Javascript POST 请求的代码

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

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

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

Answer 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>

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

How to perform GET and POST requestion on same form

javascript

jquery

ajax

cherrypy