AJAX + FLASK

Python

Иногда необходимо выполнить определенные действия без обновления страницы - авторизоваться на сайте или поставить лайк. AJAX позволяет выполнить эти действия без особых проблем. В этой небольшой статье я расскажу как можно выполнить авторизацию на сайте без обновления страницы во Flask. В качестве примера будем использовать jQuery AJAX. В последнее время библиотека jQuery получает много не самых приятных отзывов из-за быстроты работы, но мне кажется этот способ очень прост в понимании.

Настройка виртуального окружения и установка Flask

Если вы знаете как установить Flask, то смело переходим дальше, если нет, то выполняем следующие команды: Создаем каталог проекта и переходим в него

mkdir ajax_flask
cd ajax_flask

Затем активируем виртуальное окружение и устанавливаем Flask

py -3 -m venv .venv 
pip install flask

Основная часть программы

В корневой директории проекта создаем файл app.py cледующим содержимым

from flask import Flask, render_template, request, json

app = Flask(__name__)


@app.route("/")
def index():
    return render_template('login.html')


@app.route("/login", methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        login = request.form['login']
        password = request.form['password']
        if login == "admin" and password == "123456":
            response = {"message": "Авторизация успешна"}
        else:
            response = {"message": "Ошибка авторизации"}
        return json.dumps(response)

Логика работы app.py очень простая - с главной страницы мы заполняем данные формы, которые отправляем через AJAX запрос с помощью метода POST в эндпоинт login, в случае если логин и пароль совпадают с заданными, мы возвращаем результат в json формате {"message":"Авторизация успешна"}, в случае, если логин и пароль не совпали вернем сообщение об ошибке {"message":"Ошибка авторизации"}. Ответ мы обработаем и вернем пользователю сообщение под формой ниже.

Шаблон login.html

Так же в корневой директории создадим каталок templates (здесь нас будут храниться html шаблоны для Flask), в которой создадим файл login.html со следующим содержимым.

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
        crossorigin="anonymous"></script>
Введите ваш логин и пароль:
<div class="form">
    <form id="form" method="POST">
        <p><input type="text" name="login"></p>
        <p><input type="text" name="password"></p>
        <p><input type="submit" name="send" value="Отправить"></p>
    </form>
</div>

<div id="message"></div>

<script>
    $("#form").on("submit", function(){
        $.ajax({
            url: '/login',
            method: 'post',
            data: $(this).serialize(),
            success: function(response){
                var json = jQuery.parseJSON(response)
                $('#message').html(json.message);
            },
            error: function (error) {
                        console.log(error);
                    },
        });
        return false;
    });
</script>

Если рассмотреть подробно файл login.html - в первой строчке мы обязательно подключаем библиотеку jQuery через CDN А далее идет обычная форма с двумя полями - логин. После нажатия кнопки "Отправить" мы передадим данные формы с помощью data: $(this).serialize(), странице login, получим ответ в формате JSON и добавим элементу с id=message данные $('#message').text(json.message); 

Схема проекта
В итоге мы должны получить следующую схему нашего небольшого проекта

Запустим приложение с помощью команды

flask --app app.py run --debug

Если все хорошо, то мы успешно попадем на http://127.0.0.1:5000/

Проверяем работу приложения

Для проверки пробуем два варианта логина/пароля, и  получаем два различных ответа.

Заключение

Не стоит забывать, что это AJAX не ограничен jQuery, это только лишь один из способов. Есть Fetch API, Axios, SuperAgent и т.д.