
Flask не стоит на месте. Решил дополнить пример обработки формы при помощи AJXA. Я использую данный код для обработки формы заказа звонка на сайтах. Приведу список requirements.txt (для гарантии работы кода лучше использовать его). Версия Python 3.8.2.
Установка Flask и библиотек
# настройка виртуального окружения python, всё как всегда :) python3 -m venv venv # активация окружения source venv/bin/activate # обновления pip pip install pip --upgrade # установка всего необходимого pip install -r requirements.txt
Flask==1.1.2 Flask-WTF==0.14.3
Подготовка
Необходимо создать структуру проекта, лучше сделать для примера как я привел ниже:
# структура проекта . ├── app.py ├── forms.py ├── requirements.txt └── templates ├── base.html └── index.html
Создать директорию templates, и два файла в ней base.html и index.html.
mkdir templates touch templates/base.html touch templates/index.html
Содержимое файла base.html, всё как обычно, стоить отметить в строке 6 подключение библиотеки jQuery чере cnd google.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask AJAX + jQuery simple - {{ title }}</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> {% block content %} {% endblock content %} <div id="msg"></div> </body> </html>
Так же создаю файл с index.html который расширяет base.html.
Строки 3-8 содержат форму.
Строка 10 содержит div с id=»msg» в него будет записан ответ с сервера.
Сроки 13-18 код который связывает события «submit» кнопки из формы, с функцией отправки данных через ajax, в качестве параметра передается id формы и id элемента для записи ответа (без #). В данном случаи «form1» и «msg». event.preventDefault() — отменяет стандартное поведение.
Строки 23-45 функция sendAjaxForm отправляет данные формы (form1).
{% extends "base.html" %} {% block content %} <form action="/send" id="form1" method="post"> {{ form.csrf_token }} {{ form.name.label }} {{ form.name() }} {{ form.phone.label }} {{ form.phone() }} <input type="submit" value="Отправить"/> </form> <div id="msg"></div> <script> /* переопределить поведение кнопки "Отправить" */ $(document).ready(function () { $("#form1" ).submit(function( event ) { sendAjaxForm("form1", "msg"); event.preventDefault(); }); }); /* отправка формы через ajax */ function sendAjaxForm(form_ajax, msg) { var form = $("#" + form_ajax); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), success: function (response) { var json = jQuery.parseJSON(response); $('#' + msg).html(json.msg); if (json.success == 'true') { form.trigger('reset'); } else { alert("Что-то пошло не так!"); console.log("Ошибка"); } }, error: function (error) { console.log(error); } }); } </script> {% endblock %}
Подробней про функцию sendAjaxForm.
Что бы код можно было использовать для различных форм, я сделал передачу параметром формы и сообщения.
Итак, строка 23 просто получаем объект формы по id (#frim1).
Строка 25 type должен быть GET или POST это метод, беру его из параметров формы (method).
Аналогична строка 26 url должен содержать адрес для обработки запроса, в данном случаи так же берётся из формы (action). (её обрабатывает на сервере функция send см. файл app.py строка 22).
Строка 27 данные формы готовятся к отправки на сервер.
Строки 28 если всё прошло успешно, получен ответ от сервера он будет в response.
Строка 29 преобразую данные в объект json для удобства работы.
Строка 30 вывожу ответ в div с id=msg.
Строки 31-33 — успех, очищаю форму.
Строки 34-38 — что то не так, ошибка.
Строки 40-42 — если ошибки в запросе на сервер, нет связи, ошибка в url и т. д.
С HTML и JavaScript всё 🙂
Форма Flask файл forms.py
Строки 8-9 параметр DataRequired говорит о том, что они обязательны для заполнения. Length — размер не меньше 4 знаков.
В старых версиях wtf вместо StringField был TextField, сейчас лучше писать StringField. В версии 3.0 TextField перестанет работать.
from flask_wtf import FlaskForm from wtforms import StringField from wtforms.validators import DataRequired from wtforms.validators import Length class ContactForm(FlaskForm): name = StringField('Имя', validators=[DataRequired()]) phone = StringField('Телефон', validators=[DataRequired(), Length(min=4)])
Файл app.py сам проект на Flask
Строка 6 форма обратной связи.
Строка 21 декоратор обработки url «/send».
Строка 22 функция отправки «сообщения».
Строка 24 если валидация успешна, возвращает json с положительным ответом (строка 27) иначе с отрицательным (строка 30).
from flask import Flask from flask import request from flask import render_template import json # форма для обратной сзвязи from forms import ContactForm app = Flask(__name__) app.config['SECRET_KEY'] = "12345" @app.route('/', methods=['GET', 'POST']) def index(): form = ContactForm() return render_template("index.html", title="index page", form=form) @app.route('/send', methods=['POST']) def send(): form = ContactForm() if request.method == "POST": if form.validate_on_submit(): # отправить почту, записать в БД и т. д. return json.dumps({'success': 'true', 'msg': 'Ждите звонка!'}) else: # обработать ошибку return json.dumps({'success': 'false', 'msg': 'Ошибка на сервере!'}) if __name__ == '__main__': app.run(debug=True)
Запуск app.py
python3 app.py * Serving Flask app "app" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 334-159-801
Результат работы




Видео с примером работы Flask + jQuery + AJAX.
Исходники
Готовый пример можно скачать с github
git clone https://github.com/newivan/simply-ajax