Flask实现点击按钮无刷新向同一函数传递不同参数

前端修改（index.html） #

调整页面结构，移除冗余的<a>标签，给按钮添加统一类名和data-planet属性存储行星名称，再通过JavaScript实现异步请求：

<div class='container'>
    <h3>Test</h3>
    <form>
        <button class='btn btn-default planet-btn' data-planet="Mercury">Mercury</button>
        <button class='btn btn-default planet-btn' data-planet="Moon">Moon</button>
        <button class='btn btn-default planet-btn' data-planet="Mars">Mars</button>
        <button class='btn btn-default planet-btn' data-planet="Jupiter">Jupiter</button>
        <button class='btn btn-default planet-btn' data-planet="Saturn">Saturn</button>
        <button class='btn btn-default planet-btn' data-planet="Uranus">Uranus</button>
        <button class='btn btn-default planet-btn' data-planet="Neptune">Neptune</button>
    </form>
</div>

<script>
// 给所有行星按钮绑定点击事件
document.querySelectorAll('.planet-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
        e.preventDefault(); // 阻止表单默认提交，避免页面刷新
        const planetName = btn.dataset.planet; // 获取存储的行星名称
        
        try {
            // 发送异步POST请求到后端
            const response = await fetch('/planet-choice', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `planet=${encodeURIComponent(planetName)}`
            });
            
            if (response.ok) {
                console.log(`已提交行星：${planetName}`);
            } else {
                console.error('请求失败');
            }
        } catch (error) {
            console.error('请求出错:', error);
        }
    });
});
</script>

后端修改（webApp.py） #

修改路由支持POST方法，通过request.form获取前端参数，调用onPub后返回JSON响应：

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

# 假设onPub是已定义的业务函数
def onPub(planet):
    print(f"处理行星请求：{planet}")
    # 这里编写你的onPub业务逻辑

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

@app.route('/planet-choice', methods=['POST'])
def planet_choice():
    planet = request.form.get('planet')
    if planet:
        onPub(planet)
        return jsonify({'status': 'success', 'planet': planet})
    else:
        return jsonify({'status': 'error', 'message': '未获取到行星名称'}), 400

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

核心要点 #

• 无刷新实现：用e.preventDefault()阻止按钮默认提交行为，配合Fetch API发送异步请求，彻底避免页面刷新。
• 参数传递优化：通过data-*属性存储行星名称，前端无需硬编码；后端直接获取POST参数，逻辑更简洁。
• 响应逻辑调整：后端返回JSON格式响应，而非重新渲染模板，契合异步交互的场景需求。

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