Flask頁面接收GET請求而不是POST，即使Ajax正在發送POST

我不知道為什么，但我無法收到 POST 方法，而是收到了我放在這篇文章末尾的 GET 方法。我不知道我做錯了什么。我想干擾必須是<form id="myForm" >應該只呼叫函式modify_event然后發送 POST 請求。因此，在我的頭頂上，解決方案將替換它并以另一種方式呼叫該函式，例如onclick for submit，但顯然它不起作用？

感謝大家。

JS和HTML代碼：

<form id ="myForm" onsubmit="modify_event()">
      <!-- MODIFY EVENT MODAL -->
      <div class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-body">
                <div class="mb-3">
                  <label for="startdate" class="form-label">New date</label>
            <!-- HERE I PASS THE DATE -->      
                {{form1.startdate(class_='form-control')}}
                </div>

              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                Close
                </button>
                {{form1.submit()}}  
             </div>
           </div>
          </div>
        </div>
      </div>
    </form>

<script>
  function modify_event() {
    var value = document.getElementById('startdate').value;
    $.ajax({
              url: "/modify_appointment",
              type: "POST",
              data: {
                  new_date : value,
                  id: evId
              },
              success: function () {
                alert("Modified");
              }
          });
      }

Python后端代碼：

#Declaring the class 
class InfoForm(FlaskForm):
    startdate = DateTimeLocalField('Start date', format='%m-%d-%Y %h:%M', validators=[DataRequired()])
    submit = SubmitField('Submit')

#HERE IS WHERE I INITIALIZE THE FORM
@app.route('/')
def appointments():
    startdate = None
    form1 = InfoForm()
    cursor = mysql.connection.cursor()
    result = cursor.execute("select * from Appuntamento ORDER BY Data ASC")
    if result > 0:
        appuntamenti = cursor.fetchall()
        cursor.close()
        return render_template('appuntamenti.html', form1=form1, appuntamenti=appuntamenti)
    else:
        cursor.close()
        return render_template('appuntamenti.html', form1=form1)

#HERE IS WHERE THE POST SHOULD BE
@app.route("/modify_appointment",methods=["POST"])
def modify_appointment():
    cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
    if request.method == 'POST':
        getid = request.form['id']
        new_date = request.form['new_date']
        new_date = parser.parse(new_date)
        cur.execute('UPDATE Appuntamento SET Data = {0} WHERE idAppuntamento = {1}'.format(new_date, getid))
        mysql.connection.commit()
        cur.close()
        msg = 'Record deleted successfully'
        return jsonify(msg)

表單的實際作用：

GET /?startdate=2022-06-21T11:11&submit=Submit HTTP/1.1" 200 -

uj5u.com熱心網友回復：

您的表單是通過 GET 提交的，因為使用了表單的默認行為并且沒有指定方法屬性。在提交事件上呼叫 JavaScript 函式將被忽略。
為避免這種情況，您應該將事件物件傳遞給函式并呼叫preventDefault()該函式向瀏覽器發出信號以禁止該事件的默認操作。因此，您可以使用 AJAX 發送表單資料。

<form id="myForm" onsubmit="modify_event(event)">
    <!-- Your code here! -->
</form>

<script>
function modify_event(event) {
  event.preventDefault();
  /* Your code here! */
}
</script>

要重置輸入欄位的值，您可以為輸入欄位的屬性值分配一個新值，也可以重置整個表單。對于后者，輸入欄位被分配加載后設定的值。

event.target.reset()

標籤：jQuery 阿贾克斯 烧瓶 邮政 烧瓶-wtforms

上一篇：如何僅在呼叫API的回傳完成后更新React狀態

下一篇：如何為不同的按鈕點擊使用相同的php函式