如何从表单调用Flask函数并在同一页面展示计算结果？

我来帮你搞定这个Flask AJAX提交的需求！下面是完整的实现方案，包含后端和前端代码，还有详细的解释：

第一步：Flask后端代码 #

先写好后端的路由，负责渲染页面和处理计算请求：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 渲染前端页面
@app.route('/')
def index():
    return render_template('result.html')

# 处理计算请求的接口
@app.route('/calculate', methods=['POST'])
def calculate():
    # 从AJAX请求中获取用户输入的语句
    user_input = request.json.get('user_statement')
    
    # 这里替换成你的实际计算逻辑，下面是个简单示例：统计字符长度
    result = f"你输入的语句共有 {len(user_input)} 个字符"
    
    # 返回JSON格式的结果给前端
    return jsonify({'result': result})

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

第二步：前端HTML页面（result.html） #

补全你的JavaScript代码，实现无刷新提交和结果展示：

<!DOCTYPE html>
<html>
<head>
    <title>语句计算工具</title>
    <!-- 引入jQuery（如果不想用jQuery，后面有原生JS的替代方案） -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 监听表单提交事件
            $('#input-form').submit(function(e) {
                // 阻止表单默认的页面刷新提交行为
                e.preventDefault();
                
                // 获取用户输入的内容
                var userStatement = $('#user-input').val();
                
                // 发送AJAX请求到后端
                $.ajax({
                    url: '/calculate',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({'user_statement': userStatement}),
                    // 请求成功时的处理
                    success: function(response) {
                        // 把结果插入到页面的结果展示区域
                        $('#result-area').text(response.result);
                    },
                    // 请求失败时的处理
                    error: function(error) {
                        $('#result-area').text('抱歉，计算出错了，请重试');
                        console.log(error); // 控制台打印错误信息方便调试
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h2>输入语句进行计算</h2>
    <!-- 用户输入表单 -->
    <form id="input-form">
        <label for="user-input">请输入语句：</label>
        <input type="text" id="user-input" name="user_statement" required placeholder="比如：今天天气真好">
        <button type="submit">提交计算</button>
    </form>
    <!-- 结果展示区域，默认是空的 -->
    <div id="result-area" style="margin-top: 20px; color: #2c3e50; font-weight: bold;"></div>
</body>
</html>

关键逻辑解释 #

1. 后端部分：

   • / 路由负责把前端页面返回给用户；
   • /calculate 路由专门处理POST请求，通过request.json接收前端传来的JSON数据，执行计算后用jsonify返回结果，确保前端能轻松解析。

2. 前端AJAX部分：

   • 用e.preventDefault()阻止表单默认的刷新提交，这是实现同一页面展示结果的核心；
   • 把用户输入转成JSON格式发送给后端，确保数据传输的规范性；
   • 请求成功后直接把后端返回的结果插入到页面的#result-area元素中，无需刷新页面。

替代方案：不用jQuery的原生JS实现 #

如果你不想依赖jQuery，也可以用原生JavaScript的fetch API实现相同功能，把上面的<script>部分替换成：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('input-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const userStatement = document.getElementById('user-input').value;
        
        fetch('/calculate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({'user_statement': userStatement}),
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('result-area').textContent = data.result;
        })
        .catch(error => {
            document.getElementById('result-area').textContent = '抱歉，计算出错了，请重试';
            console.error('错误信息：', error);
        });
    });
});

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