基于jQuery Ajax的Flask网页Submit按钮失效问题求助

先帮你定位核心问题，再一步步搞定表单提交、数据传递和后续SQLAlchemy查询的需求：

1. 修复Submit按钮无响应的JS问题 #

你的表单提交事件处理里有两个关键bug，导致点击无响应：

• 用event.preventDefault()阻止了默认提交，但AJAX的success回调里引用了未定义的url变量，会直接触发JS报错中断流程；
• 最后返回return true完全没必要，因为preventDefault()已经彻底阻止了默认表单行为。

修改后的提交事件代码：

$('#insert_form').on('submit', function(event) {
    event.preventDefault(); // 保留AJAX提交，阻止默认刷新
    var form = $(this);
    var form_data = form.serialize();
    
    $.ajax({
        url: form.prop('action'),
        type: form.prop('method'),
        data: form_data,
        success:function(data) {
            // 替换成你需要的成功反馈，比如跳转结果页或者提示信息
            $('#error').html('<div class="alert alert-success">查询条件已提交！</div>');
            // 要是需要跳转到结果页面，加这句：window.location.href = '/search_results';
        },
        error:function(xhr, status, error) {
            // 增加错误处理方便调试
            $('#error').html('<div class="alert alert-danger">提交失败：' + error + '</div>');
        }
    });
});

2. 修复表单字段命名的规范问题 #

你动态生成的表单元素name属性拼接有语法错误（比如name="search_option_summary"' + count），会导致后端难以统一接收数据。建议改成数组格式，方便批量获取：

调整动态生成的select和input的name属性：

// 当主类型是s_r时
html += '<td><select name="search_option_summary[]" class="form-control summary_option">' +
        '<option selected="selected" value="phylum">Phylum</option>' +
        '<option value="genus">Genus</option>' +
        '</select></td>';

// 当主类型是c_h时
html += '<td><select name="search_option_c[]" class="form-control c_option">' +
        '<option selected="selected" value="c_type">c type</option>' +
        '<option value="genus">Genus</option>' +
        '</select></td>';

// 连词选择框
html += '<td><select name="conj_option[]" class="form-control conj_option">' +
        '<option selected="selected" value="and">And</option>' +
        '<option value="or">Or</option>' +
        '</select></td>';

// 输入框
html += '<td><input type="text" name="item_name[]" class="form-control item_name" placeholder="' + main_search_type + '" ></td>';

后端可以通过request.form.getlist('search_option_summary[]')这类方法，一次性获取所有动态添加的字段值。

另外，别忘给.main_search按钮加type="button"，否则默认是submit类型，点击会意外触发表单提交：

<button class="btn btn-info main_search" name="main_search" id="s_r" data-id="s_r" type="button">S_R</button>
<button class="btn btn-info main_search" name="main_search" id="c_h" data-id="c_h" type="button">C_H</button>

3. 传递主搜索类型到后端 #

你当前的JS只是把main_search_type存在变量里，但没把这个值放进表单提交，后端根本拿不到。需要在form里加个隐藏字段：

<form method="POST" id="insert_form" action="/search2">
    <!-- 新增隐藏字段存储主搜索类型 -->
    <input type="hidden" name="main_search_type" id="main_search_type" value="">
    
    <!-- 原有表单内容 -->
</form>

然后在.main_search的点击事件里更新这个隐藏字段的值：

$(document).on('click', '.main_search', function () {
    if (count == 0) {
        main_search_type = $(this).data("id");
    } else {
        if ($(this).data("id") != main_search_type) {
            main_search_type = $(this).data("id");
            $('#item_table tbody').empty();
            count = 0;
        } else {
            main_search_type = $(this).data("id");
        }
    }
    // 更新隐藏字段
    $('#main_search_type').val(main_search_type);
});

4. Flask后端接收数据并构建SQLAlchemy查询 #

在/search2路由里接收表单数据，再结合SQLAlchemy动态构建查询：

from flask import request, render_template
from your_models import YourModel  # 替换成你的实际模型类

@app.route('/search2', methods=['POST'])
def search2():
    # 获取主搜索类型
    main_search_type = request.form.get('main_search_type')
    # 获取动态生成的字段值
    summary_options = request.form.getlist('search_option_summary[]')
    c_options = request.form.getlist('search_option_c[]')
    conj_options = request.form.getlist('conj_option[]')
    item_names = request.form.getlist('item_name[]')
    
    # 初始化查询
    query = YourModel.query
    
    # 根据主类型和条件构建动态查询
    if main_search_type == 's_r':
        for i in range(len(summary_options)):
            option = summary_options[i]
            name = item_names[i]
            # 第一个条件没有前置连词，默认用and
            conj = conj_options[i] if i > 0 else 'and'
            
            if option == 'phylum':
                if conj == 'and':
                    query = query.filter(YourModel.phylum == name)
                else:
                    query = query.filter(YourModel.phylum == name)
            elif option == 'genus':
                if conj == 'and':
                    query = query.filter(YourModel.genus == name)
                else:
                    query = query.filter(YourModel.genus == name)
    elif main_search_type == 'c_h':
        # 同理处理c_h类型的查询条件
        pass
    
    # 执行查询
    results = query.all()
    # 返回结果页面
    return render_template('search_results.html', results=results)

这样修改后，Submit按钮就能正常提交数据，所有用户输入的条件都会传递到后端，再通过SQLAlchemy实现高效的动态查询。

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