如何通过纯JavaScript将按钮触发的函数数据发送至Flask后端？

首先得说下你当前方案为啥跑不起来：你的按钮没指定type属性，默认会被浏览器识别为submit类型——点击时会立刻触发表单提交，可能你在sendDataToBacked里修改按钮value的操作还没完成，表单就已经提交了，导致后端拿到的还是按钮的初始值（空或者默认值）。而且这种依赖表单控件传值的方式本身就不够可靠，用AJAX（纯JavaScript）就能完美解决这个问题，还能实现无刷新提交。

下面给你两种纯JS实现方式，都是现代浏览器支持的方案：

方式一：贴合你原有写法的内联onclick #

前端代码 #

function sendDataToBackend() {
    // 要发送的数据
    const data = "I want to send this to backend";
    
    // 用fetch API发送POST请求（纯JS的AJAX方案，替代旧的XMLHttpRequest）
    fetch('/', {
        method: 'POST',
        // 设置请求头，告诉后端我们发送的是表单格式的数据
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        // 编码数据，避免特殊字符导致的格式问题
        body: `button=${encodeURIComponent(data)}`
    })
    .then(response => {
        // 检查请求是否成功
        if (!response.ok) {
            throw new Error('请求失败');
        }
        return response.text(); // 如果后端返回JSON，就换成response.json()
    })
    .then(result => {
        console.log('数据发送成功！后端响应：', result);
        // 这里可以加成功后的操作，比如给用户弹提示
    })
    .catch(error => {
        console.error('发送数据出错：', error);
        // 处理错误情况，比如提示用户重试
    });
}

对应的HTML可以简化，不需要表单了：

<button id="myButton" onclick="sendDataToBackend()">Send</button>

方式二：更规范的事件监听写法（推荐） #

这种写法把JS逻辑和HTML结构分离，更易维护和扩展：

<button id="myButton">Send</button>

<script>
// 给按钮绑定点击事件
document.getElementById('myButton').addEventListener('click', function() {
    const data = "I want to send this to backend";
    
    fetch('/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `button=${encodeURIComponent(data)}`
    })
    .then(response => response.text())
    .then(result => {
        console.log('数据已成功发送！', result);
    })
    .catch(err => {
        console.error('发送失败：', err);
    });
});
</script>

后端代码小优化 #

你的后端代码基本没问题，建议用request.form.get()替代直接取键，避免参数不存在时抛出KeyError：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # 用get方法更安全，参数不存在时返回None
        received_data = request.form.get('button')
        if received_data:
            print('收到的数据：', received_data)
        # 可以给前端返回一个响应，比如确认信息
        return "数据已收到"
    return render_template("index.html")

扩展：发送JSON格式的数据 #

如果以后要发送更复杂的数据（比如对象、数组），可以改用JSON格式：

前端JS调整 #

body: JSON.stringify({button: data}),
headers: {
    'Content-Type': 'application/json',
}

后端对应调整 #

received_data = request.get_json().get('button')

这样就可以完美实现无刷新的前端数据发送到Flask后端啦！

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