Обновление данных с использованием 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);

        });


    });




});