无需重新加载页面的 Flask 表单提交

在 Web 应用程序开发中，表单是一个十分常见的元素。在 Flask 中，表单提交的方式有两种：GET 和 POST。但是这两种方式都需要重新加载页面，这会使用户体验变差。

为了解决这个问题，我们可以使用 AJAX 技术实现无需重新加载页面的表单提交。

实现步骤

1. 安装 Flask-WTF 和 Flask-JQuery 包

   pip install Flask-WTF
   pip install Flask-JQuery
   

2. 在 HTML 文件中引入 jQuery 库和 Flask-JQuery 的 jquery.js 和 jquery.form.js 文件

   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="{{ url_for('static', filename='jquery.js')}}"></script>
   <script src="{{ url_for('jquery.js', filename='jquery.form.js')}}"></script>
   

3. 在表单中添加一个具有 id 属性的 form 标签

   <form action="{{ url_for('submit_form') }}" method="POST" id="form">
       ...
   </form>
   

4. 使用 jQuery 的 ajaxSubmit 方法提交表单数据，并处理返回的数据

   $(document).ready(function(){
       $('#form').on('submit', function(e){
           e.preventDefault();
           $(this).ajaxSubmit({
               success: function(response){
                   // 处理返回的数据
               }
           });
       });
   });
   

5. 在 Flask 应用程序中处理表单提交

   from flask import Flask, request, jsonify
   from flask_jquery import JQuery
   
   app = Flask(__name__)
   jquery = JQuery(app)
   
   @app.route('/submit-form', methods=['POST'])
   def submit_form():
       # 处理表单提交
       ...
       # 返回响应数据
       return jsonify({'result': 'success'})
   

运行演示

demo

总结

通过以上步骤，我们成功实现了无需重新加载页面的 Flask 表单提交。这不仅提高了用户体验，而且也提高了 Web 应用程序的性能。