Отправка данных JSON из шаблона во Flask с использованием AJAX с использованием запроса POST:
- Установка заголовка запроса для типа содержимого JSON.
JSON.stringify данныеперед отправкой во Flask.
Получите данные JSON во Flask:
Я показываю пример отправки данных JSON в Flask, обработки в Flask и возврата обработанных данных из Flask в шаблон.,
Первоначально данные JSON содержат массив объектов:
[
{"name": "John", "email": "John@test.com"},
{"name": "Jenny", "email": "Jenny@yahoo.com"}
]
Предположим, нам нужно изменить эти данные, чтобы они имели атрибут id.
Структура папки:
├── app.py
└── templates
└── index.html
app.py:
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
def get_processed_data(data):
for i,item in enumerate(data):
data[i]["id"] = i
return data
@app.route("/", methods=['GET', 'POST'])
def login():
if request.method == "POST":
request_data = request.get_json()
processed_data = get_processed_data(request_data)
return jsonify(processed_data), 200
return render_template("index.html")
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
index.html:
<html>
<head>
<title>Post JSON data using AJAX</title>
</head>
<body>
<h2>
POST JSON data using AJAX
</h2>
<button id="send_data_btn">Send Data</button>
<script>
var send_data_btn = document.getElementById("send_data_btn");
function postData() {
var request_url = "http://127.0.0.1:5000/";
var request_payload = [
{"name": "John", "email": "John@test.com"},
{"name": "Jenny", "email": "Jenny@yahoo.com"}
];
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('POST', request_url);
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200) {
var processed_data = JSON.parse(xhr.responseText);
console.log(processed_data);
}
};
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(request_payload));
}
send_data_btn.addEventListener("click", postData);
</script>
</body>
</html>
Выход:
Когда пользователь нажимает кнопку Send Data, он отправляет данные JSON из шаблона в приложение Flask.В приложении Flask данные обрабатываются и возвращают обработанные данные в шаблон.