通过Ajax POST传递HTML按钮值到Flask时数据为空的问题排查

我尝试通过Ajax POST将HTML中点击的按钮值传递给Flask函数，制作了如下示例，但调试时点击按钮终端出现400错误；改用request.form则得到空值ImmutableMultiDict([('search', '')])。

原HTML代码 #

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
        <div>
            <button value="btn1">Button1</button>
            <button value="btn2">Button2</button>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            $(this).on('click', function(event) {
                var value = $(this).val();
                $.ajax({
                    type : 'POST',
                    url : '/process',
                    contentType: 'application/json',
                    data : {'search' : value}
                });
                event.preventDefault();
            });
        });
    </script>
</html>

原Flask代码 #

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

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

@app.route('/process', methods=['GET', 'POST'])
def process():
    value = request.get_json()
    print(value)
    return render_template('index.html')

if __name__ == "__main__":
    app.run(port=5000, debug=True)

问题根源 #

• 事件绑定目标错误：原代码中$(this).on('click', ...)里的this在$(document).ready()回调中指向的是document对象，而非按钮元素。点击按钮时，$(this).val()获取的是无效值（undefined），导致传递的数据无效。
• JSON数据未正确序列化：当设置contentType: 'application/json'时，jQuery不会自动将JavaScript对象转为JSON字符串，需要手动序列化，否则Flask无法解析请求体，返回400错误。
• 响应类型不匹配：AJAX请求属于异步交互，返回HTML模板不符合场景，应返回JSON格式数据方便前端处理。

修正后的代码 #

修正版HTML #

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
        <div>
            <button value="btn1">Button1</button>
            <button value="btn2">Button2</button>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            // 绑定点击事件到所有button元素
            $('button').on('click', function(event) {
                var value = $(this).val();
                $.ajax({
                    type : 'POST',
                    url : '/process',
                    contentType: 'application/json',
                    // 手动将对象序列化为JSON字符串
                    data : JSON.stringify({'search' : value}),
                    // 可选：处理成功响应
                    success: function(res) {
                        console.log('后端响应:', res);
                    }
                });
                event.preventDefault();
            });
        });
    </script>
</html>

修正版Flask代码 #

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

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

@app.route('/process', methods=['POST'])
def process():
    # 获取并解析JSON数据
    value = request.get_json()
    print('收到的按钮值:', value)
    # 返回JSON格式响应
    return jsonify({'status': 'ok', 'button_value': value.get('search')})

if __name__ == "__main__":
    app.run(port=5000, debug=True)

可选方案：用表单格式提交 #

如果不想用JSON格式，可直接传递表单数据：

• HTML中Ajax部分修改：

$.ajax({
    type : 'POST',
    url : '/process',
    data : {'search' : value},
    success: function(res) {
        console.log('后端响应:', res);
    }
});

• Flask中修改：

@app.route('/process', methods=['POST'])
def process():
    # 通过表单获取值
    value = request.form.get('search')
    print('收到的按钮值:', value)
    return jsonify({'status': 'ok', 'button_value': value})

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