Как я могу использовать AJAX для отображения данных на той же странице и загрузки данных - для запроса, отправленного пользователем в текстовой области?[Колба]

Question

Моя текущая настройка - /, и когда пользователь отправляет запрос на textarea, он перенаправляет на /data для отображения данных.

Я бы хотел сделать следующее.

1. Вместо перенаправления я хотел бы отобразить результат чуть ниже поля запроса textarea.

2. Я также хотел бы предоставить пользователю возможность экспортировать результат в csv / json / etc. С CSV я бы хотел начать.

Я читаю онлайн и, кажется, понимаю, что мне нужно использовать AJAX для 1 (и 2?) И StringIO для 2. Сейчас у меня проблема с соединением точек. Может кто-нибудь указать мне какой-нибудь псевдокод / ​​направление?

Я сделал что-то с jsonify для моего /data, он возвращает нужные данные в формате json. Мне просто нужно перенести это на ту же стартовую страницу. Если я смогу это выяснить, тогда я могу попытаться использовать Datatables для рендеринга таблиц. Я все еще новичок в AJAX и html/css в целом.

app.py

from flask import Flask, redirect, render_template, request, url_for
from forms import QueryField
import os
import sqlalchemy


app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(12)


@app.route('/', methods=['GET', 'POST'])
def home():
    form = QueryField()
    if request.method == 'GET':
        return render_template('home.html', form=form)
    elif form.validate_on_submit():
        return redirect(url_for('data'))
    return render_template('home.html', form=form)


@app.route('/data', methods=['POST'])
def data():
    if request.method == 'POST':
        query = request.form['query']
        engine = sqlalchemy.create_engine('postgresql://user:pw@localhost/db')
        result = engine.execute(query)
        col_names = result.keys()
        col_vals = [dict(row) for row in result]

        return render_template('data.html', colname=col_names, colval=col_vals)



if __name__ == '__main__':
    app.run(debug=True)

forms.py

from flask_wtf import FlaskForm
from wtforms import validators, StringField


class QueryField(FlaskForm):
    query = StringField(label='Query', validators=[validators.DataRequired()])

home.html

{% extends "base.html" %}

{% block content %}


<form method="POST" action="{{ url_for('data') }}">
    {{ form.csrf }}
    {{ form.query.label }} <br>
    <!-- {{ form.query(class="query") }} -->
    <textarea name="query" class="query"></textarea>
    <br>
    <br>

    <input type="submit" value="Submit">
</form>


{% endblock %}

data.html

{% extends "base.html" %}

{% block content %}


<div id="table">
    <table>
        <tr>
        {% for col in colname %}
            <th>{{ col }} </th>
        {% endfor %}
        </tr>
        {% for row in colval %}
            <tr>
            {% for col in colname %}
                <td>{{ row[col] }} </td>
            {% endfor %}
            </tr>
        {% endfor %}
    </table>
</div>

{% endblock %}