Flask结合AJAX/JavaScript实现SQLite数据表按日期范围筛选故障求助

问题根因&修复步骤 #

1. 前端AJAX未传递日期参数（最核心问题）

你当前调用/admin/pay/range接口的AJAX请求没有携带用户输入的起止日期，后端自然拿不到筛选条件，要么走默认2021年的固定日期范围（如果这段时间无数据就返回空），要么参数验证失败走默认逻辑。
修改JS里的change函数，添加data字段传参：

change = function () {
    $("#data").empty();
    // 新增：获取表单输入的日期值
    let start_date = $('input[name="start_date"]').val();
    let end_date = $('input[name="end_date"]').val();
    $.ajax({
        url: "{{ url_for('range')}}",
        dataType: 'json',
        type: 'get',
        cache: true,
        // 新增：传递参数
        data: {
            start_date: start_date,
            end_date: end_date
        },
        success: function (data) {
            // 原有渲染逻辑不变
            var event_data = '';
            $.each(data.data, function (index, value) {
                event_data += '<tr>';
                event_data += '<td style="align-content: center; width: 100px; min-width: 100px;"> \
                                            <i class="fas"></i> \
                                        <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> \
                                            <i class="fas fa-eye"></i></a> \
                                        <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> \
                                            <i class="fas fa-edit"></i></a> \
                                 </td>';
                event_data += '<td style="text-align:center;">' + value.payout_id + '</td>';
                event_data += '<td style="text-align:center;">' + value.batch_id + '</td>';
                event_data += '<td>' + value.date + '</td>';
                event_data += '<td>' + value.amount + '</td>';
                event_data += '<td>' + value.transaction_id + '</td>';
                event_data += '</tr>';
            });
            $("#data").append(event_data);
        },
        error: function (d) {
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

2. 后端FlaskForm使用错误

• validate_on_submit是方法，必须加括号调用，你现在写的是if form.validate_on_submit，永远为真，但实际没执行验证
• FlaskForm默认从POST的form字段取参数，你用GET请求的话需要指定从request.args取参数
• 还要处理日期格式匹配，避免解析错误
  修改后端range接口代码：

from flask import request
from datetime import datetime

@app.route("/admin/pay/range",methods=["POST","GET"])
def range(): 
    #  GET请求要指定从request.args取参数
    form = dates_filter(request.args)
    start_date = None
    end_date = None
    # 加括号调用验证方法
    if form.validate_on_submit():
        start_date = form.start_date.data
        end_date = form.end_date.data
    # 验证失败或者参数为空的话走默认逻辑
    if not start_date or not end_date:
        start_date = datetime.strptime('1/11/2021', '%d/%m/%Y').date()
        end_date =  datetime.strptime('10/11/2021', '%d/%m/%Y').date()
    # 确保和数据库date字段类型匹配，转成date对象
    return {'data': [payout.to_dict() for payout in Payouts.query.filter(Payouts.date.between(start_date, end_date))]}

3. 其他小问题修复

1. 前端重复加载jQuery，删除旧版本的引入：
   删除<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>，保留3.1.1版本即可，避免版本冲突。
2. 页面路由的render_template引号写错，修改为：

return render_template('admin/payouts.html', form = form)

3. 如果你的日期输入框格式是年-月-日，需要保证FlaskForm的DateField能正确解析，必要时可以指定格式：

class dates_filter(FlaskForm):
    start_date = DateField('start_date', format='%Y-%m-%d')
    end_date = DateField('end_date', format='%Y-%m-%d')

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