1

Доброго врменени суток. Стоит задача сделать вход в личный кабинет. Использую фреймворк Flask, серверный язык - python, шаблоны jinja2.

По нажатию на изображение, отправляется post запрос на сервер из файла js, далее срабатывает функция на python. В этой функции происходит перенаправление на страницу личного кабиинета и передаеются данные пользователя - в формате JSON (дикт с тремя ключами). Эти данные можно вывести в html файле, но они не доступны в файле js. Как это можно исправить? Заранее благодарю.

base.html - базовый шаблон, от которого наследуются все html страницы приложения

<form name="form_in">
   <input type="text"  placeholder="Логин" id="log" name="login"/>
   <input type="password"  placeholder="Пароль" id="pass" name="password"/>
</form>
<img src="{{url_for('static', filename='icons/send.svg')}}" id="send"/>
{% block js_func %}
   <script type="text/javascript" src="{{url_for('static', filename='js/common.js')}}" ></script>
{% endblock %}

private.html - личный кабинет

{% extends "base.html" %}
{% block js_func %}
    {{ super() }}
    <script type="text/javascript" src="{{url_for('static', filename='js/private.js')}}" ></script>
{% endblock %}

common.js

 document.getElementById('send').onclick = function (){
        var form = document.querySelector('sidebar.in form');
        form.method = 'post';
        form.action = '/personal_account';
        form.submit();

    }

private.js - не работает

function test_func(data) {
    console.log(data);
}
test_func({{ data|safe }});

функции на python

def get_user_data(login):
    # ........................
    # запрос и обработка данных ....
    # ...........

    # выводимые данные 
    data = {'firstname': first_name,
            'values': consumed_electricity,
            'days_number': len(consumed_electricity)}
    return data


@app.route('/personal_account', methods=['POST'])
def welcome():
    login = request.form['login']
    password = request.form['password']
    if not validate_user(login, password): # функция для валидации пользователя, отдает булево значение
        abort(403)
    data = get_user_data(login)
    return render_template('private.html', data=data)
1
  • по сути вы хотите AJAX изобрести: не перегружайте страницу целиком, а просто асинхронный запрос посылайте. Если хотите всё-таки перегружать, то нужный javascript код в новую страницу вместе с данными передавайте.
    – jfs
    6 фев 2018 в 12:27

1 ответ 1

2

Эти данные можно вывести в html файле, но они не доступны в файле js. Как это можно исправить?

Проблема в том, что функция render_template в вашем коде работает только с private.html, а private.js никак с jinja2 не взаимодействует. Но так и должно быть, jinja2 не может влиять на содержимое ссылки.


Самое простое решение написать js код прямо в html документе:

<script>
    function test_func(data) {
        console.log(data);
    }
    test_func({{data}});    
</script>

Но это не очень удобно, поэтому можно извратиться и написать свой template filter. Тогда содержимое шаблона будет таким:

<script>{{'static/test.js'|script(data)|safe}}</script>

Фильтр script превращает скрипт в jinja2 шаблон и подставляет в него нужные данные:

from flask import Flask, render_template
import jinja2, os

app = Flask(__name__)

@app.route('/')
def test():
    return render_template("index.html", data={'test':'test'})

@app.template_filter('script')
def script(script_path, data):
    path, filename = os.path.split(script_path)
    return  jinja2.Environment(
        loader=jinja2.FileSystemLoader(path or './')
    ).get_template(filename).render(data = data)

if __name__ == '__main__':
    app.run(debug=True)

Содержимое test.js:

function test_func(data) {
    console.log(data);
}
test_func({{data}}); 

На выходе мы видим то же самое, что в первом примере:

<script>
    function test_func(data) {
        console.log(data);
    }
    test_func({'test': 'test'});
</script>

В некоторых случаях удобно получать данные прямо из url:

#http://127.0.0.1:5000/?data=test

function test_func(data) {
    console.log(data);
}
test_func(getUrlVars()["data"]);

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(
        /[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        }
    );
    return vars;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.