Flask实现仅重载指定模板而非整页刷新的问题

要实现点击Calc按钮后仅加载results.html而不刷新整页，需要用AJAX异步请求替代传统的表单提交，以下是具体修改方案：

1. 调整后端路由（views.py） #

修改calc路由，直接返回计算结果的JSON数据，不再重定向；同时新增返回模板内容的辅助路由：

from flask import render_template, request, jsonify
from app import app

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

@app.route('/calc', methods=["POST"])
def calc():
    # 用float替代eval，避免代码执行风险
    a = float(request.form['field_a'])
    b = float(request.form['field_b'])
    c = a * b
    # 返回JSON格式的计算结果
    return jsonify({"result": c})

# 返回home模板内容
@app.route('/home_content')
def home_content():
    return render_template('home.html')

# 返回results模板内容
@app.route('/get_results')
def get_results():
    result = request.args.get('result')
    return render_template('results.html', result=result)

2. 修改主模板结构（main.html） #

给内容区域添加固定ID，方便JS动态替换；同时添加处理异步请求的脚本：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
    </head>
    <body>
        <div class="div_principal">   
            {% include "form.html" %}
            
            <!-- 内容容器，初始显示home内容 -->
            <div id="content-container">
                {% include "home.html" %}
            </div>

            <form id="home-form"> 
                <button type="submit" class="button" id="home">Home</button>
            </form>
        </div>

        <script>
            // 处理Calc按钮提交
            document.getElementById('form').addEventListener('submit', function(e) {
                e.preventDefault(); // 阻止默认表单提交（避免整页刷新）
                
                const formData = new FormData(this);
                
                // 发送异步POST请求
                fetch("{{ url_for('calc') }}", {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    // 请求results模板并替换内容
                    fetch("{{ url_for('get_results') }}?result=" + data.result)
                    .then(res => res.text())
                    .then(html => {
                        document.getElementById('content-container').innerHTML = html;
                    });
                })
                .catch(error => console.error('请求出错:', error));
            });

            // 处理Home按钮点击
            document.getElementById('home-form').addEventListener('submit', function(e) {
                e.preventDefault();
                fetch("{{ url_for('home_content') }}")
                .then(res => res.text())
                .then(html => {
                    document.getElementById('content-container').innerHTML = html;
                });
            });
        </script>
    </body>
</html>

3. 调整表单模板（form.html） #

移除form的action属性，由JS处理提交逻辑：

<form class="form" id="form" method="post"> 
    <div>
      <label for="field_a" onclick="msgRazEq()">A</label>
      <input type="number" id="field_a" name="field_a" class="input_number" value="" step="0.01" min="0.00" required>
    </div>
    <div>
      <label for="field_b" onclick="msgRazEq()">B</label>
      <input type="number" id="field_b" name="field_b" class="input_number" value="" step="0.01" min="0.00" required>
    </div>
  <button type="submit" class="button" id="calc">Calc</button>
</form>

关键说明 #

• 用e.preventDefault()阻止表单默认提交行为，彻底避免整页刷新；
• 通过fetch发送异步请求，获取后端数据后动态更新页面指定区域的内容；
• 替换eval()为float()，消除恶意代码执行的安全风险。

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