How To Build A Flask Ajax Template

0 comments

impshum1.155 years agoSteemit2 min read

A Simple Flask Application

First install Flask with pip install flask

Next we'll need to create some directories and files. Here's a nice tree.

├── run.py
├── static
│   ├── css
│   │   └── styles.css
│   └── js
│       └── scripts.js
└── templates
    └── index.html

run.py

from flask import Flask, render_template

app = Flask(name)

    @app.route('/')
    def index():
        title = 'WELCOME TO FLASK'
        subtitle = 'HAVE A NICE DAY'
        description = 'SOME COOL LETTERS & THINGS HERE'
        footer = 'FOOTER TEXT'
        return render_template('index.html', title=title, subtitle=subtitle, description=description, footer=footer)

    @app.route('/do_something', methods=['POST'])
    def do_something():
        msg = 'DOING PYTHON STUFF'
        print(msg)
        return msg

if name == 'main':
app.run(debug=True)

static/css/styles.css

    .footer {
      padding-top: 6rem !important;
      padding-bottom: 6rem !important;
    }

static/js/scripts.js

$(function() {

      $('#go').click(function() {
        $('#go').addClass('is-loading');
        $.ajax({
          url: '/do_something',
          type: 'POST',
          success: function(response) {
            $('#results').html(response);
            $('#go').removeClass('is-loading');
          }
        });
      });

});

templates/index.html

      Flask Tutorial