Передача параметров Flask в JavaScript на HTML-странице: руководство для начинающих - Fcodenotes

В веб-разработке обычно используется Flask, популярная микроплатформа Python, для обработки операций на стороне сервера, а также JavaScript для обработки взаимодействий на стороне клиента. Одной из распространенных задач является передача данных из Flask в JavaScript. В этой статье мы рассмотрим несколько способов достижения этой цели с примерами кода и понятными объяснениями.

Метод 1: встраивание параметров Flask в атрибуты HTML
Один простой метод — встраивание параметров Flask непосредственно в атрибуты HTML. Допустим, мы хотим передать параметр «имя пользователя» из Flask в JavaScript:

Код фляги:

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    username = "John Doe"
    return render_template('index.html', username=username)
if __name__ == '__main__':
    app.run()

HTML-код (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Welcome, <span id="username" data-username="{{ username }}"></span>!</h1>
</body>
</html>

Код JavaScript (script.js):

window.addEventListener('DOMContentLoaded', (event) => {
    const username = document.getElementById('username').dataset.username;
    console.log(username); // Output: John Doe
});

Объяснение:
В этом методе мы передаем параметр Flask «имя пользователя» на HTML-страницу с помощью функции render_template. Затем мы используем атрибут data-usernameдля сохранения значения имени пользователя в элементе HTML. JavaScript получает значение с помощью свойства dataset.

Метод 2: использование AJAX для получения параметров Flask.
Другой подход предполагает использование AJAX для асинхронного получения параметров Flask. Этот метод полезен, когда вам нужно получить динамические данные с сервера.

Код флакона:

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/user')
def get_user():
    username = "John Doe"
    return jsonify(username=username)
if __name__ == '__main__':
    app.run()

Код JavaScript (script.js):

window.addEventListener('DOMContentLoaded', (event) => {
    fetch('/api/user')
        .then(response => response.json())
        .then(data => {
            const username = data.username;
            console.log(username); // Output: John Doe
        });
});

Объяснение:
В этом методе мы создаем маршрут Flask /api/user, который возвращает имя пользователя в формате JSON. JavaScript использует API fetchдля выполнения асинхронного запроса по этому маршруту и получения имени пользователя.

Передача параметров Flask в JavaScript на HTML-странице открывает ряд возможностей для динамических и интерактивных веб-приложений. В этой статье мы рассмотрели два метода: встраивание параметров в атрибуты HTML и использование AJAX для асинхронного получения параметров. Понимая эти методы, вы сможете улучшить свои навыки работы с Flask и JavaScript и создавать более мощные веб-приложения.