如何通过AJAX将HTML下拉框值传给Flask后端实现同页无刷新渲染

核心问题原因 #

• 下拉框<select>仅设置了name属性，没有设置id属性，原代码中$("#id_options")是ID选择器，无法匹配到对应元素，自然拿不到选中值
• AJAX请求默认不会自动携带表单数据，需要手动组装要提交的参数传递给后端
• 原AJAX请求用的是GET方法，后端用request.form只能获取POST请求的表单数据，GET请求的参数需要用request.args获取
• 两个按钮共用同一个类名，点击新页面提交按钮也会触发AJAX逻辑，产生冲突

代码修改步骤 #

1. 前端setup.html修改 #

第一步：给下拉框添加id属性

找到<select>标签，补充id配置：

<select name="id_options" id="id_options" width="300px">

第二步：区分两个按钮的触发逻辑

给同页加载的按钮单独设置类名，避免和表单提交按钮冲突：

<button class="get_ajax_result" type="button">同页加载结果</button>
<button type="submit">新页面打开</button>

第三步：修改AJAX请求逻辑

替换原JS部分的代码：

$(document).on('click', '.get_ajax_result', function () {
    // 拿到下拉框选中值
    var selectedId = $("#id_options").val();
    $.ajax({
        url: "/test",
        type: "post", // 用POST方法和原表单提交逻辑保持一致，后端无需修改取值逻辑
        data: { 
            id_options: selectedId // 参数名和后端request.form.get的参数名保持一致
        },
        success: function (response) {
            $(".result").html('<h1>' + response.result.toString() + '</h1>');
        },
    });
});

2. 后端补充依赖导入（如果未导入） #

确保setup.py顶部已经导入所需依赖：

from flask import render_template, request, jsonify

两种场景差异说明 #

• 表单提交跳新页面：浏览器会自动收集表单内所有带name属性的控件值，组装成表单数据随POST请求发送给后端，无需手动处理参数
• AJAX无刷新请求：属于手动发起的异步请求，浏览器不会自动携带表单数据，需要开发者手动获取需要传递的参数，放到请求的data字段中发送给后端

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