通過 AJAX 分別提交 2 個表單 - Python Flask

Question

我正在嘗試通過 AJAX 提交 2 個單獨的表單，但是在提交 form2 時我收到 500 個錯誤的請求錯誤。 我的 HTML 代碼如下，但基本上我的頁面是一個燒瓶模板，其工作方式如下：

*用戶進行選擇

*然后通過名為“按鈕”值“計算可用總體高度”的提交按鈕發布這些選擇。

*這將運行一些 SQL 查詢來確定放入新生成的條目列表<select id="mySelect" class="form-control" onchange="myFunction()"></select>這是由 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(); };

我的JS.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 的更多內容。 我的問題是我在提交 form2 時收到了錯誤的請求。

有人對我做錯了什么有任何想法嗎？

Answer 1

我認為您正在使用相同的端點 URL 來嘗試處理 2 個不同的請求。 第二種形式沒有發送正確的數據，然后您會收到服務器錯誤。 嘗試在您的 python Flask 服務器上創建另一個端點來處理 form2 和myText字段值。

通過 AJAX 分別提交 2 個表單 - Python Flask

問題描述

1 個解決方案

解決方案1
0 已采納 2019-01-10 13:53:54

通過 AJAX 分別提交 2 個表單 - Python Flask

問題描述

1 個解決方案

解決方案1 0 已采納 2019-01-10 13:53:54

解決方案1
0 已采納 2019-01-10 13:53:54