В примере я использую Python3, если у вас Python2 добавьте в начало файла app.py строку:
# -*- coding: utf-8 -*-
Для начала понадобится Flask. Ниже показано как установить его в виртуальное окружение.
$ mkdir flask_simple_ajax $ virtualenv --system-site-packages --python=/usr/bin/python3 env $ source env/bin/activate $ pip install flask
В корне flask_simple_ajax создайте файл app.py с серверным кодом:
from flask import Flask, render_template, json, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/get_len', methods=['GET', 'POST'])
def get_len():
name = request.form['name'];
return json.dumps({'len': len(name)})
if __name__ == '__main__':
app.run(debug=True)
Далее нужно создать директории template, static/js:
$ mkdir templates $ mkdir -p static/js
Скачайте с сайта jQuery библиотеку и положите её в static/js.
В template создайте файл index.html со следующим содержимым:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX вместе с Flask</title>
<script type=text/javascript src="{{ url_for('static', filename='js/jquery-2.2.2.min.js') }}"></script>
</head>
<body>
<script>
function get_len() {
$.ajax({
type: "POST",
url: "/get_len",
data: $('form').serialize(),
type: 'POST',
success: function(response) {
var json = jQuery.parseJSON(response)
$('#len').html(json.len)
console.log(response);
},
error: function(error) {
console.log(error);
}
});
}
</script>
<form action="/get_len" method="post" name="form">
<label for="name">Введите текст:</label>
<input id="name" name="name" type="text">
<input type="button" value="Отправить" onclick="get_len();">
</form>
<div id="len"></div>
</body>
</html>
Не забудьте поправить в строке 6 версию jquery на которую скачали ранее. Можно было ничего не качать и вместо 6-й строки написать:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Но в некоторых случаях лучше, что бы всё работало автономно.
Запускаем:
$ python3 app.py
Результат можно посмотреть в браузере по адресу http://localhost:5000/
Данный пример прост для понимания, вы быстро разберётесь и сожмите добавлять AJAX в свои проекты.
Готовые исходные кода можно взять на github
Спасибо тебе огромное!!! 3 дня я бился и искал решение.
Данный топик в твоём блоге меня нереально выручил! Спасибо ещё раз.
Сергей, добрый день.
Можете подсказать пример js/ajax скрипта для автообновления страницы без каких либо форм «отправить».
Для примера, есть база данных (или json api), которая в режиме онлайн обновляет информацию по названию композиций на радио и нужно данные треки автоматически обновлять на странице.
Опечатка в коде:
type: «POST»,
…
type: ‘POST’,
Спасибо. Из-за большого количества спама, только сейчас увидел ваше сообщение 🙂
А как обработать ещё одну форму на этой же странице? Добавлял ещё один блок function get_len2(), со значением data(‘form’) — питон ругается что поле не найдено
* data(‘form2’)
вопросик) даже два) во-первых, почему в аякс запросе type=’POST’ указан дважды? Если первый относится к типу аякс запроса, то второй к чему?
И второй вопрос. Почему на сервере применяется метод request.form а не request.json? Как должен выглядеть аякс запрос чтобы request.json получил из запроса нужные данные?
Спасибо!
Ответ на первый вопрос. Ошибка в коде. Один раз должно быть.
Второй вопрос можно использовать request.json или request.form зависит от задачи.
Например если уже есть готовая форма и код который её отрабатывает можно использовать request.form. Иначе
request.json.
А как быть с нажатием кнопки «Enter» в поле ввода, оно перенаправляет на страницу с словарем введенных данных?
Можно использовать обработку нажатия Enter на JavaScript.