使用 JQuery 和 Flask 更新数据答案

【问题标题】：Updating data using JQuery and Flask使用 JQuery 和 Flask 更新数据
【发布时间】：2023-03-18 11:13:01
【问题描述】：

我一直在尝试更新数据库而不刷新页面。我得到了使用 AJAX 的解决方案，但是存在一些问题并且无法解决。你介意看看并建议改变吗？

我已经为.js 文件的文件路径添加了<script>。但是，无法更新mysql中的数据。我能够获取 html 中的数据，但无法更新。

app.py

@app.route('/update', methods=['GET', 'POST'])
def update():
    # all_data = BankData.query.all()
    if request.method == 'POST':
        start_date = request.form.get('start_date')
        end_date = request.form.get('end_date')

        searched_data = db.session.query(BankData).filter(
            BankData.process_date.between(start_date, end_date))

    # db.session.add(searched_data)
    # db.session.commit()
    # start_date=start_date, end_date=end_date,
    return render_template('update.html', start_date=start_date, end_date=end_date, searched_data=searched_data)


@app.route('/update_two', methods=['POST'])
def update_two():

    # searched_data = session.get('searched_data')
    if request.method == 'POST':
        new_data = BankData.query.get(request.form['id'])
        for data in new_data:
            print(data.id)

        new_data.id = request.form['id']
        new_data.process_date = request.form['date']
        new_data.description = request.form['description']
        new_data.debit = request.form['debit']
        new_data.category = request.form['category']
        db.session.commit()
        print("data submitted")

        return jsonify({'result': 'success'})

app.js

$(document).ready(function () {

    $('.updateButton').on('click', function () {

        var data_id = $(this).attr('data.id');

        var date = $('#dateInput' + data.id).val();
        var description = $('#descriptionInput' + data.id).val();
        var debit = $('#debitInput' + data.id).val();
        var category = $('#categoryInput' + data.id).val();



        req = $.ajax({
            url: '/update_two',
            type: 'POST',
            data: { date: date, description: description, debit: debit, category: category, id: data_id }
        });

        req.done(function (data) {

            $('#dataSection' + data_id).fadeOut(1000).fadeIn(1000);
            // $('#dataNumber' + data_id).text(data.search_data);

        });


    });

});

【问题讨论】：

当您说存在问题时，这究竟是什么意思？你遇到了什么错误？
没有错误，但我看不到 update_two 路由的 POST 消息，所以看起来 .js 文件和 update.html 没有连接，也没有调用烧瓶路由
所以基本上数据没有被更新但是我可以看到.html中的所有数据但是当我点击.js中按钮的点击事件时没有发生

标签： ajax flask sqlalchemy

【解决方案1】：

下面是更正的代码。它工作正常。

$(document).ready(function () {
    $('.updateButtonInvoice').on('click', function () {

        var data_id = $(this).attr('data_id');

        var invoiceNumber = $('#invoiceNumberInput' + data_id).val();
        var invoiceDate = $('#invoiceDateInput' + data_id).val();
        var weekEndDate = $('#weekEndDateInput' + data_id).val();
        var storeNumber = $('#storeNumberInput' + data_id).val();
        var description = $('#descriptionInput' + data_id).val();
        var totalExGst = $('#totalExGstInput' + data_id).val();
        var category = $('#categoryInput' + data_id).val();



        req = $.ajax({
            url: '/updatetwoInvoice',
            type: 'POST',
            data: { invoiceNumber: invoiceNumber, invoiceDate: invoiceDate, weekEndDate: weekEndDate, storeNumber: storeNumber, description: description, totalExGst: totalExGst, category: category, id: data_id }
        });

        req.done(function (data) {

            $('#dataSectiontwoInvoice' + data_id).fadeOut(1000).fadeIn(1000);

        });


    });




});

【讨论】：