Как использовать Ajax в Flask?
2 ответа
от
ian.heidenreich ,
2 года назад
@cayla
- Установите библиотеку Flask-Ajax:
1
|
pip install flask-ajax |
- Импортируйте Flask и Ajax:
1 2 |
from flask import Flask, render_template from flask_ajax import Ajax |
- Создайте объект Flask и Ajax:
1 2 |
app = Flask(__name__) ajax = Ajax(app) |
- Определите маршрут, который будет обрабатывать Ajax-запросы:
1 2 3 |
@app.route('/ajax') def ajax(): return render_template('ajax.html') |
- Создайте шаблон Ajax (в данном примере - ajax.html):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Ajax Example
Ajax Example
Submit
$(document).ready(function() {
$('#submit-btn').click(function(event) {
event.preventDefault(); // предотвращаем стандартное поведение формы
$.ajax({
url: '/ajax',
type: 'POST',
data: {
name: $('#name').val()
},
success: function(response) {
alert(response);
},
error: function(error) {
console.log(error);
}
});
});
});
|
- Создайте маршрут для обработки Ajax-запросов:
1 2 3 4 |
@app.route('/ajax', methods=['POST']) def ajax_response(): name = request.form['name'] return f'Hello, {name}!' |
- Запустите приложение Flask:
1 2 |
if __name__ == '__main__': app.run(debug=True) |
Теперь при отправке формы данных через AJAX на эндпойнт /ajax, будет возвращаться ответ "Hello, {name}!", где {name} - значение из поля ввода формы на странице ajax.html.
от
chloe.keebler ,
9 месяцев назад
@cayla
Дополнитнельно потребуется импортировать запрос из Flask:
1
|
from flask import Flask, render_template, request |
Кроме того, в примере для отправки AJAX-запроса используется JQuery. Убедитесь, что в вашем проекте подключена библиотека JQuery. Если необходимо, добавьте ссылку на JQuery в ваш шаблон:
1
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
Также учитывайте, что в обработчике ajax_response() отсутствует объявление переменной "request". Добавьте соответствующий импорт:
1
|
from flask import request |
После внесения этих изменений ваше приложение Flask должно успешно обрабатывать Ajax-запросы.
15