使用JQuery和Flask更新数据

Question

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

我已经为<script>文件的文件路径添加了.js。但是，无法在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);

        });


    });

});

Answer 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);

        });


    });




});