В этой статье я покажу, как использовать AJAX с Flask, фреймворком Python, для асинхронного получения и отображения значений, введенных в форму. Нужный нам исходный код я добавил в конце статьи.
Что такое АЯКС?
AJAX означает «асинхронный JavaScript + XML», и AJAX обеспечивает асинхронную связь с сервером. В случае синхронной обработки вы должны отправить запрос из своего веб-браузера на сервер и дождаться ответа. С другой стороны, при асинхронной связи вам не нужно отправлять запрос из веб-браузера для обработки данных. Например, когда вы используете Карты Google, переход изображений или экранов не происходит, даже когда вы меняете свое положение. Вы можете увеличивать масштаб и перемещаться по карте, не обновляя страницу. Кроме того, Google Suggest предлагает поисковые предложения в тот момент, когда вы вводите текст, поэтому вам не нужно нажимать кнопку поиска, чтобы увидеть их. При этом также используется технология асинхронной связи.
Кстати, вы знаете, что такое XML? Расшифровывается как «Расширяемый язык разметки». Один из языков разметки, используемый для описания смысла и структуры документов и данных (аналог HTML). Однако в настоящее время тип JSON часто используется для Ajax вместо XML.
Синхронный VS Асинхронный
Синхронная связь
Обычно веб-страницы взаимодействуют с сервером в так называемой синхронной связи. Веб-браузер передает запрос на сервер, и ответ возвращается. В это время экран на мгновение становится белым, потому что передается вся информация. Чтобы браузер не мог ничего сделать, пока не получит ответ от сервера.
Асинхронная связь
Некоторая информация запрашивается у веб-браузера, поэтому остальная информация остается неизменной. Таким образом, экран не станет белым. Чтобы браузер мог выполнять другую работу, даже если он не получает ответа от сервера.
Как создать асинхронную форму?
Содержание
- Структура папок
- Создание формы с помощью HTML
- Написать код для AJAX
- Импорт jsonify, render_templae и запрос
- Получить значения в формате JSON
1. Структура папок
📁 AJAX_sample | |__📁 templates / index.html | |__app.py
2. Создайте форму с помощью HTML
Сначала создайте форму с помощью HTML. Я ввожу фамилию и имя и отображаю результат в поле output под тегом form. Идентификаторы input будут firstname и lastname.
index.html <h1>AJAX Sample</h1> <form id="form"> <h2>First Name</h2> <input type="text" id="firstname"> <h2>Last Name</h2> <input type="text" id="lastname"> <button type="submit" name="button">Submit</button> </form> <div id="output"></div>
Затем добавьте сценарий jQuery в head для подготовки к связи AJAX. Я бы использовал его от разработчиков Google.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3. Напишите код для AJAX
Итак, как я могу получить значение из формы? Это основной способ сделать это.
- Получите отправку формы.
- Получить целевой URL или входное значение формы.
- Отправьте и покажите данные.
- Отменить обычную отправку.
Давайте напишем код для AJAX следующим образом.
<script type="text/javascript">
$(document).ready(function() {
$('#form').on('submit',function(e){
$.ajax({
data : {
firstname : $('#firstname').val(),
lastname : $('#lastname').val(),
},
type : 'POST',
url : '/'
})
.done(function(data){
$('#output').text(data.output).show();
});
e.preventDefault();
});
});
</script>
Если вы не знакомы с этим,
$(document).ready(function(){})
Это означает, что процесс в function() будет выполнен после загрузки HTML. jQuery (JavaScript) обычно не работает должным образом, если вы запускаете что-то без полной загрузки HTML. Итак, мы будем использовать это готовое.
При нажатии кнопки отправки формы запускается AJAX.
$('#form').on('submit',function(e){}
Начинается связь AJAX. Он получит доступ к HTML. Я использую $.ajax(), предоставленный в jQuery, для связи с сервером через AJAX.
$.ajax({})
В data:{} напишите идентификатор, значение и имя ключа, как я установил в input. val() — это метод, позволяющий получить или изменить значение атрибута, записанное в HTML-теге. Тип — POST или GET, а URL — это URL-адрес назначения.
data : {
firstname : $('#firstname').val(),
lastname : $('#lastname').val(),
},
type : 'POST',
url : '/'
После успешного получения данных добавьте данные в output, а затем покажите их. show() можно использовать для отображения скрытых элементов.
done(function(data){
$('#output').text(data.output).show()
})
Наконец, добавьте e.preventDefault.
e.preventDefault();
У меня есть событие onSubmit, чтобы я мог использовать его для отмены исходного процесса POST.
4. Импортируйте jsonify, render_template и запрос
app.py from flask import Flask, jsonify, render_template, request app = Flask(__name__)if __name__ == '__main__': app.run(debug=True)
- jsonify — вернуть или создать ответ в формате JSON.
- render_template — визуализация HTML для механизма шаблонов.
- запрос — использует POST и GET.
5. Получить значения в формате JSON
Получает значения формата JSON, отправленные через связь AJAX при публикации. Если есть входные данные из form, данные JSON будут возвращены в output.
@app.route('/', methods=['GET','POST'])def index():
if request.method == "POST":
firstname = request.form['firstname']
lastname = request.form['lastname']
output = firstname + lastname
if firstname and lastname:
return jsonify({'output':'Your Name is ' + output + ', right?'})
return jsonify({'error' : 'Error!'})
return render_template('index.html')
def index() возвращает index.html. (Кстати, def — это функция Python.) В этом def я установлю данные формы, имя и фамилию как firstname и lastname. Затем создайте output, который представляет собой данные, объединенные с firstname и lastname.
Если оба данных формы существуют, верните output с помощью jsonify. Если нет, значит у меня нет данных, поэтому я бы вернул ошибку.
Теперь вы можете увидеть «Вас зовут Аюми Танака, верно?» благодаря AJAX!
Вывод
Очень удобно, что мы можем получать данные без обновления. Написание части AJAX немного сложно, но в основном довольно просто. Вы можете создать эту форму AJAX всего с 60 строками кода!
