Flask with jQuery API Request Demo

example.html

{%  extends 'base.html' %}


{% block content %}
    <script src="{{ url_for('static', filename='js/example.js') }}"></script>

    <div id="users">

    </div>
{% endblock %}

example.js

$(function() {
    const userDiv = $('#users');
    
    $.get('api/users', (res) => {
        for (user of res) {
            console.log(user);
            userDiv.append(`<li>${user.username}</li>`);
        }
    });

});

routes.py

@app.route('/example')
def example():
    """Example of using sqlalchemy to return JSON."""
    return render_template('example.html')


@app.route('/api/users')
def get_all_users():
    """Example of using sqlalchemy to return JSON."""
    users = User.query.all()

    return jsonify([u.serialize() for u in users])

This code assumes a base.html which had a head which includes a script tag to the jQuery CDN! Edit: it needs to be the full uncompressed version of jQuery.

It also assumes you need to serialize the sqlalchemy models. Here's an example of how you can do that:

class User(ModelMixin, db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(75), nullable=False)
    email = db.Column(db.String, unique=True)
    password = db.Column(db.String, nullable=False)

    def serialize(self):
        return {
            "id": self.id, "username": self.username,
            "email": self.email
        }