如何通过HTML按钮获取动态select值并传入Flask/JSON？

我帮你梳理清楚需求后，整理了一套前后端完整的可运行方案，解决从动态下拉框取值、AJAX传参到Flask后端修改JSON数组的全流程问题：

一、核心需求回顾 #

• 从AJAX动态生成的mySelect下拉框中获取选中值
• 通过CreateDrawing按钮发起无刷新请求，将选中值传给Flask后端
• 后端接收值后修改JSON数组，前端可处理返回结果

二、优化后的前端代码 #

先修正你原有代码的小问题，再完善CreateDrawing的点击逻辑：

1. 表单提交AJAX（修正版） #

$("form").on("submit", function(event) {
    const $targetElement = $('#response');
    event.preventDefault();
    
    $.ajax({
        url: '/OAH',
        data: $(this).serialize(), // 用$(this)代替全局$('form')，避免多表单冲突
        dataType: 'json', // 修正原代码datatype大小写错误
        type: 'POST',
        success: function(response) {
            // 更新页面元素
            $("#RearPillarNS").empty().append("Rear Pillar Assembly Part No: " + response["RearPillarNS"]);
            $("#TableThing").empty().append(response["table"]);
            
            // 生成下拉框逻辑优化
            for (const key in response) {
                if (key === 'myList') {
                    $targetElement.empty();
                    const select = $('<select id="mySelect" class="form-control"></select>');
                    response[key].forEach(item => {
                        select.append($('<option>').val(item).text(item)); // 给option加val，确保取值正确
                    });
                    // 用jQuery绑定change事件，替代内联onchange
                    select.on('change', myFunction);
                    $targetElement.append(select);
                } else {
                    $(':input[name="' + key + '"]').val(response[key]);
                }
            }
            
            myFunction();
        },
        error: function(xhr, status, error) {
            console.error('表单提交失败:', error);
            alert('表单提交出错，请检查输入');
        }
    });
});

// 单独定义myFunction，代码更清晰
function myFunction() {
    const selectedVal = $('#mySelect').val();
    console.log('当前选中值:', selectedVal);
    // 这里可以添加选中后的自定义逻辑
}

2. CreateDrawing按钮点击逻辑 #

$(function() {
    $('a#CreateDrawing').on('click', function(e) {
        e.preventDefault();
        
        // 先判断下拉框是否存在且有选中值
        const selectedValue = $('#mySelect').val();
        if (!selectedValue) {
            alert('请先选择一个选项');
            return;
        }
        
        // 发起AJAX请求传递选中值
        $.ajax({
            url: '/Printit',
            type: 'POST', // 用POST处理修改操作更安全
            data: { selected_item: selectedValue },
            dataType: 'json',
            success: function(response) {
                console.log('JSON数组修改成功:', response);
                alert('绘图创建完成！');
                // 可在这里添加页面更新逻辑，比如刷新下拉框或展示修改后的数组
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', error);
                alert('创建绘图出错，请稍后重试');
            }
        });
        
        return false;
    });
});

三、Flask后端示例代码 #

模拟后端接收参数、修改JSON数组的逻辑：

from flask import Flask, request, jsonify

app = Flask(__name__)

# 模拟存储的JSON数组（实际可从文件/数据库读取）
my_json_array = [
    {"id": 1, "name": "初始项1"},
    {"id": 2, "name": "初始项2"}
]

# 处理表单提交的路由
@app.route('/OAH', methods=['POST'])
def handle_form():
    # 模拟返回表单处理结果，实际根据业务逻辑生成数据
    return jsonify({
        "RearPillarNS": "XYZ-789",
        "table": "<table><tr><td>示例表格内容</td></tr></table>",
        "myList": ["选项A", "选项B", "选项C"],
        "sample_field": request.form.get("sample_field", "")
    })

# 处理CreateDrawing请求的路由
@app.route('/Printit', methods=['POST'])
def update_json_array():
    # 获取前端传递的选中值
    selected_item = request.form.get('selected_item')
    if not selected_item:
        return jsonify({"status": "error", "msg": "未选择有效选项"}), 400
    
    # 修改JSON数组的示例逻辑：添加新项
    new_item = {"id": len(my_json_array)+1, "name": selected_item}
    my_json_array.append(new_item)
    
    # 返回处理结果
    return jsonify({
        "status": "success",
        "msg": f"已添加选项: {selected_item}",
        "updated_array": my_json_array
    })

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

四、配套HTML示例 #

确保页面有对应的DOM元素：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX无刷新示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <!-- 表单区域 -->
    <form>
        <input type="text" name="sample_field" placeholder="输入测试内容">
        <button type="submit">提交表单</button>
    </form>

    <!-- 响应展示区域 -->
    <div id="RearPillarNS"></div>
    <div id="TableThing"></div>
    <div id="response"></div>

    <!-- CreateDrawing按钮 -->
    <a href="#" id="CreateDrawing">创建绘图</a>

    <!-- 引入JS代码 -->
    <script>
        // 把上面的前端JS代码粘贴到这里
    </script>
</body>
</html>

关键优化说明 #

1. 代码健壮性：修正原代码的大小写错误、全局表单选择器问题，添加错误处理
2. 参数传递：用POST请求传递修改类参数，比GET更安全合规
3. 用户体验：添加选中值校验、操作提示，避免无效请求
4. 可维护性：拆分内联事件为独立函数，逻辑更清晰

整套代码可以直接运行，启动Flask服务后，提交表单会生成下拉框，点击按钮即可将选中值传给后端修改JSON数组，全程无页面刷新。

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