Flask中如何通过URL传递结果并在页面展示而非跳转至JSON？

核心思路 #

不用跳转至JSON结果页，推荐通过AJAX异步提交表单实现无刷新展示；若坚持用URL传参，可在处理POST请求后重定向回原页面并携带参数，再读取参数渲染结果。

方案1：AJAX异步提交（推荐，无页面跳转） #

这是用户体验最优的实现方式，步骤如下：

1. Flask后端调整
   保留/get_grade_data的POST逻辑，直接返回JSON数据而非跳转：

   from flask import Flask, request, jsonify, render_template
   
   app = Flask(__name__)
   
   @app.route('/')
   def index():
       return render_template('index.html')  # 原页面模板
   
   @app.route('/get_grade_data', methods=['POST'])
   def get_grade_data():
       # 收集表单提交的用户信息
       username = request.form.get('username')
       course = request.form.get('course')
       # 此处替换为你的业务逻辑（如查询成绩）
       result = {
           'username': username,
           'course': course,
           'grade': '92'
       }
       return jsonify(result)  # 返回JSON格式结果
   

2. 前端页面（index.html）修改
   给表单添加ID，用JS监听提交事件，阻止默认跳转，通过AJAX提交并在原页面渲染结果：

   <!DOCTYPE html>
   <html>
   <body>
       <form id="gradeForm">
           <input type="text" name="username" placeholder="用户名" required>
           <input type="text" name="course" placeholder="课程名称" required>
           <button type="submit">查询成绩</button>
       </form>
       <!-- 用于展示结果的区域 -->
       <div id="resultArea" style="margin-top:20px;"></div>
   
       <script>
           const form = document.getElementById('gradeForm');
           const resultArea = document.getElementById('resultArea');
   
           form.addEventListener('submit', async (e) => {
               e.preventDefault(); // 阻止表单默认跳转行为
               const formData = new FormData(form);
               try {
                   const response = await fetch('/get_grade_data', {
                       method: 'POST',
                       body: formData
                   });
                   const data = await response.json();
                   // 在原页面动态渲染结果
                   resultArea.innerHTML = `
                       <h3>查询结果</h3>
                       <p>用户名：${data.username}</p>
                       <p>课程：${data.course}</p>
                       <p>成绩：${data.grade}</p>
                   `;
               } catch (error) {
                   resultArea.innerHTML = '<p>查询失败，请稍后重试</p>';
               }
           });
       </script>
   </body>
   </html>
   

方案2：重定向回原页面并携带GET参数（URL传参） #

若必须通过URL传递结果，可按以下方式实现：

1. Flask后端调整
   处理POST请求后，将结果转为URL参数，重定向回原页面：

   from flask import Flask, request, redirect, url_for, render_template
   
   app = Flask(__name__)
   
   @app.route('/')
   def index():
       # 读取URL中的结果参数
       result_params = request.args.get('result')
       return render_template('index.html', result=result_params)
   
   @app.route('/get_grade_data', methods=['POST'])
   def get_grade_data():
       username = request.form.get('username')
       course = request.form.get('course')
       # 拼接结果参数（复杂数据建议用Base64编码）
       result_str = f"username={username}&course={course}&grade=92"
       # 重定向回原页面并携带参数
       return redirect(url_for('index', result=result_str))
   

2. 前端页面（index.html）修改
   在页面加载时读取URL参数并展示：

   <!DOCTYPE html>
   <html>
   <body>
       <form method="POST" action="/get_grade_data">
           <input type="text" name="username" placeholder="用户名" required>
           <input type="text" name="course" placeholder="课程名称" required>
           <button type="submit">查询成绩</button>
       </form>
       <div id="resultArea" style="margin-top:20px;">
           {% if result %}
               {% set params = result.split('&') %}
               <h3>查询结果</h3>
               {% for param in params %}
                   <p>{{ param.split('=')[0] }}：{{ param.split('=')[1] }}</p>
               {% endfor %}
           {% endif %}
       </div>
   </body>
   </html>
   

注意事项 #

• 方案1的AJAX方式无页面刷新，用户体验更佳；
• 方案2的URL传参方式不适合传递敏感数据，参数会暴露在地址栏；
• 若结果数据结构复杂，方案1的JSON传递更高效，方案2可考虑对参数进行Base64编码，但仍不推荐用于敏感数据。

内容的提问来源于stack exchange，提问作者dave