通过AJAX-Python-Flas分别提交两个表单

2024-10-03 21:29:53 发布

您现在位置：Python中文网/ 问答频道 /正文
8943 3

我试图通过AJAX提交两个单独的表单，但是在提交表单2时，我得到了一个500个错误的请求错误。 我的HTML代码如下，但基本上我的页面是一个flask模板，其工作方式如下：

*用户选择

*然后通过名为“button”Value“Calculate Available Overall height”的提交按钮发布这些选择

*这将运行一些SQL查询来确定放入新生成的<select id="mySelect" class="form-control" onchange="myFunction()"></select>中的条目列表 这是由JS完成的，JS也被列为MyJS.JS

OAH.html

    <!DOCTYPE html>
    <html>
    <head>

    </head>
    <body>

      <p class="h2">XXX</p>
      <form method="post" id="form1">
        <fieldset>
      </div>
  <div class="col-sm-3">




<span style="float:left"><label>Overall Height</label></span>
              ///my inputs, various selects etc ///

            <div id="response">
              <!-- Empty element until form submitted-->
            </div>

            <p id="ApertureHeight"></p>
            <p id="ApertureHeightBelowPelmet"></p>
            <p id="ApertureHeightUnderRoofSticks"></p><br>
            <p id="OverallWidth"></p>
            <p id="RearAppWidth"></p>
            <p id="RearPillarNS"></p>
            <p id="OAH"></p>

      </div>
        </fieldset>
      <script src="/static/js/MyJS.js"></script>

      </form>

        <form method="post" id="form2">


          <div class="col-sm-3">
            <label>
                  <span style="float:left"><input type="text" id="myText" value=""></span>
                       </label>
              <br>
        <input type="button" value="Click Me!" onclick="submitForms()" />

          </div>
          </form>    
    </body>
    </html>

form2有一个按钮叫“点击我！”调用一个提交表单2的函数

submitForms = function(){ document.getElementById("form2").submit(); };

MyJS.js

    $("#form1").on("submit", function(event) {
  $targetElement = $('#response');
  event.preventDefault();
  // Perform ajax call
  //
  console.log("Sending data: " + $(this).serialize());
  $.ajax({
    url: '/OAH',
    data: $('form').serialize(),
    datatype: 'json',
    type: 'POST',
    success: function(response) {
      // Success handler
      var TableTing = response["table"];
      $("#TableThing").empty();
      $("#TableThing").append(TableTing);
      for (key in response) {
        if (key == 'myList') {
          // Add the new elements from 'myList' to the form
          $targetElement.empty();
          select = $('<select id="mySelect" class="form-control" onchange="myFunction()"></select>');

          response[key].forEach(function(item) {
            select.append($('<option>').text(item));
          });
          $targetElement.html(select);
        } else {
          // Update existing controls to those of the response.
          $(':input[name="' + key + '"]').val(response[key]);
        }
      }
      return myFunction()
      // End handler
    }
    // Proceed with normal submission or new ajax call
  })
});



submitForms = function(){
    document.getElementById("form2").submit();
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$("#form2").on("submit", function(event) {

  event.preventDefault();
  console.log("Sending data: " + $(this).serialize());
  $.ajax({
    url: '/OAH',
    data: $('#form2').serialize(),
    datatype: 'json',
    type: 'POST',
    success: function(response) {
      return myFunction()
      // End handler
    }
    // Proceed with normal submission or new ajax call
  })
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function myFunction() {
  var FifthWheel = document.getElementById("FifthWheelHeight").value;
  var NeckDepth = document.getElementById("NeckDepth").value;
  var CantRailDepth = document.getElementById("CantRailDepth").value;
  var RearTensioner = document.getElementById("RearTensioner").value;
  var OAH = document.getElementById("mySelect").value;
  if (CantRailDepth = 115) {
    var PelmetDim = 100;
  } else {
    PelmetDim = 75;
  }
  var ApertureHeight = Number(OAH) - Number(FifthWheel) - Number(NeckDepth) - Number(CantRailDepth);
  var ApertureHeightBelowPelment = Number(ApertureHeight) - Number(PelmetDim);
  var ApertureHeightUnderRoofSticks = Number(OAH) - Number(FifthWheel) - Number(NeckDepth) - 35;

  document.getElementById("ApertureHeight").innerHTML = "Aperture below Cantrail = " + ApertureHeight + "mm";
  document.getElementById("ApertureHeightBelowPelmet").innerHTML = "Aperture below pelmet = " +
    ApertureHeightBelowPelment + "mm";
  document.getElementById("ApertureHeightUnderRoofSticks").innerHTML = "Aperture below roof sticks = " +
    ApertureHeightUnderRoofSticks + "mm";
  document.getElementById("OverallWidth").innerHTML = "Overall Width = 2548mm (2550mm on spec)";
  document.getElementById("OAH").innerHTML = OAH;
  document.getElementById("myText").value = document.getElementById("OAH").innerHTML;
}

我需要这个表单单独提交，通过AJAX而不刷新页面，因为我需要JSON数组能够计算更多的东西，这些东西将被传递到Python Flask中。我的问题是我在提交表格2时收到了一个错误的请求

有人知道我做错了什么吗


Tags： divformidnumbervalueresponsevarfunction
1条回答
网友
1楼 · 发布于 2024-10-03 21:29:53

我认为您正在使用相同的端点URL来尝试处理2个不同的请求。第二个表单没有发送正确的数据，因此您将收到服务器错误。尝试在python flask服务器上创建另一个端点来处理form2和myText字段值

相关问题 更多 >

    编程相关推荐