提交 Flask 表单而不重新渲染页面

Question

我正在用 flask 构建一个表单，下面是我的 flask 服务器的简化版本

app = Flask(__name__)

@app.route("/", methods = ["POST", "GET"])
def main_page():
    if request.method == "POST": 
        # some cool stuff

    return render_template("main.html") 

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

问题是它在用户提交表单时重新呈现页面，跳转到页面顶部。这使得用户体验有点糟糕。如何在不重新渲染整个页面的情况下获取表单的数据？

Answer 1

如果你想提交表单数据，但又不想完全re-render页面，你唯一的选择是使用AJAX.
在下面的示例中，使用 Fetch API 发送表单数据。服务器上的处理基本保持不变，因为表单数据以相同的格式提交。
但是，由于这里通常有 JSON 格式的响应，我建议将端点外包，以便在 HTML 和 JSON 路由之间分离。

from flask import (
    Flask,
    jsonify,
    render_template,
    request
)

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    # Same cool stuff here.
    print(request.form.get('data'))

    return jsonify(message='success')

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Index</title>
  </head>
  <body>

    <form name="my-form" method="post">
      <input type="text" name="data" />
      <input type="submit" />
    </form>

    <script type="text/javascript">
      (uri => {
        // Register a listener for submit events.
        const form = document.querySelector('form[name="my-form"]');
        form.addEventListener('submit', evt => {
          // Suppress the default behavior of the form.
          evt.preventDefault();
          // Submit the form data.
          fetch(uri, {
            method: 'post',
            body: new FormData(evt.target)
          }).then(resp => resp.json())
            .then(data => {
              console.log(data);
              // Handle response here.
            });
          // Reset the form.
          evt.target.reset();
        });
      })({{ url_for('upload') | tojson }});
    </script>

  </body>
</html>

提交 Flask 表单而不重新渲染页面

Submit Flask form without re-rendering the page

python

post

get

flask

server-side-rendering