时间戳

首页 > 解决方案 > jQuery .show() 之后，Flask 页面继续执行 GET 请求

python - jQuery .show() 之后，Flask 页面继续执行 GET 请求

问题描述

我有一个显示表单的 div 和一个隐藏表格的 div。当我单击 NEXT 按钮时，它会使用一些 jQuery 从表单中提取信息并填充表格，同时隐藏表单 div 并显示表格 div。

但是，现在我试图将它连接到 Flask API，并且我得到了要显示的页面，但是当我单击 NEXT 时，表单 div 被隐藏并且表格被填充并显示，但随后它立即消失并返回到表单（服务器端显示它在我单击下一步后立即执行 GET 请求，填充的表显示并立即消失）。如何阻止它执行 GET 请求并填充表格，等待另一个按钮单击？当我使用 jQuery 从表单中提取内容时，GET 请求是否会自动发生？

这是HTML：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
      <link rel="stylesheet" href="{{ url_for('static', filename='css/jdrequest_form.css') }}">
    </head>
  <body>

    <div class = "header">
      <div id=inner> <h1>Grand Valley Water Users Association</h1> </div>
    </div> 

    <form class="grid-container">
      <section class="title box"><h3>Water Request</h3></section>

      <section class="serial-label spec-label">Serial Number</section>
      <section class="serial-input spec-input-serial">
        <input type="text" name="serialNum">
      </section>

      <!-- A BUNCH MORE INPUT BOXES WITH LABELS... -->

      <section class="send-request box"><button class="nextBtn">Next</button></section>
    </form>

    <!--
      Start of Confirmation Page
      This is hidden by default and appears in place of the Water Request Form
      when the "Next" button is clicked (via the JavaScript file) 
    -->
    <div class = "confirm">
      <div class = "confirmInstructions">
      <p>Please review your order carefully before submitting it.</p>
      </div>
      <table>
        <tbody>
          <tr>
            <td>Serial Number:</td>
            <td id="serial-num"></td>
          </tr>
          <!-- A BUNCH MORE TABLE ENTRIES -->
        </tbody>
      </table>
      <div class="edit-submit">
        <button class="editBtn">Edit Request</button>
        <button class="submit-btn" href="/">Submit Request</button>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/jdrequest_form.js') }}"></script>
  </body>
</html>

这是jQuery：

/*  
*   Upon clicking the "Next" button, this will hide the request form 
*   and copy all of the values from the form into a table for the
*   client to review. 
*/
$("button.nextBtn").click(function(){
  $(".grid-container").hide();

  $("#serial-num").text($("[name='serialNum']").val());
  /* AND A BUNCH MORE OF THE SAME SORT OF THING*/

  $(".confirm").show();
});

$("button.editBtn").click(function(){
  $(".confirm").hide();
  $(".grid-container").show();
});

这是我到目前为止的烧瓶：

from flask import Flask, render_template, redirect, request, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
# initialize database with settings from app
db = SQLAlchemy(app)

class Form_Items(db.Model):
  id = db.Column(db.Integer, primary_key=True)
  serial_num = db.Column(db.Integer, nullable=False)
  # AND A BUNCH OF OTHERS THAT DON'T MATTER

  # IGNORE THIS. I HAVEN'T MESSED WITH IT YET
  def __repr__(self):
    return '<Task %r>' % self.id

@app.route('/', methods=['POST', 'GET'])
def jdrequest_form():
  if request.method=='POST':
    # A BUNCH OF DATABASE STUFF THAT DOESN'T MATTER

  else:
    return render_template('jdrequest_form.html')

if __name__ == "__main__":
  app.run(debug=True)

最后，当我单击 NEXT 按钮时，Flask 应用程序在终端中显示的内容如下：

127.0.0.1 - - [27/Mar/2020 17:45:30] “GET / HTTP/1.1” 200 - 127.0.0.1 - - [27/Mar/2020 17:45:30] “GET /static/js/ jdrequest_form.js HTTP/1.1" 200 - 127.0.0.1 - - [27/Mar/2020 17:45:30] "GET /static/css/jdrequest_form.css HTTP/1.1" 200 - 127.0.0.1 - - [27/ Mar/2020 17:45:48] "GET /?serialNum=45645&meterReading=456&requestType=Change&sF=456&changefromsF=456&changetosF=456&date=2020-03-10&lateral=456&turnout=456&remarks=xfzxcfgszfgdf&name=zs2df00+asdf HTTP/1.1" -

在我实际单击 SUBMIT REQUEST 按钮之前，我不希望发生任何请求（目前它什么都不做，但 EDIT REQUEST 按钮应该隐藏表格并重新启动表单，而不需要请求，对吧？）。如果有人知道我哪里出错了，我很想听听，这样我就可以让这个项目再次进行。谢谢！

标签： pythonjqueryhtmlflask

解决方案

当您点击提交按钮时，您的表单正在执行其默认的 GET 请求。为了防止其默认行为：

$("button.nextBtn").click(function(event) { 
    event.preventDefault();
    ...

推荐阅读