Как отправить данные из JS в Python с помощью Flask?

Я делаю веб-сайт с колбой, и я хотел бы иметь возможность выполнять код python, используя данные со страницы. Я знаю, что могу просто использовать формы, но это одна страница, которая постоянно обновляется по мере получения пользовательского ввода, и было бы огромной болью в заднице, чтобы перезагрузить страницу каждый раз, когда что-то происходит. Я знаю, что могу сделать {{ function() }} внутри JavaScript, но как мне это сделать {{ function(args) }} внутри javascript с использованием переменных js? До сих пор единственное, что я могу придумать, это обновить внешняя база данных, такая как MongoDB с js, затем использует Python для чтения из этого, но этот процесс довольно сильно замедлит веб-сайт.

jQuery должен получить список объектов словаря из функции Python, который затем может использоваться в html. Поэтому мне нужно уметь делать что-то вроде:

JS:

var dictlist = { getDictList(args) };
dictlist.each(function() {
    $("<.Class>").text($(this)['Value']).appendTo("#element");
});

Python:

def getDictList(args):
    return dictlistMadeFromArgs
6
flask javascript jquery python

1 ответов

чтобы получить данные из Javascript в Python с помощью Flask, вы либо делаете "АЯКС" В ДОЛЖНОСТИ запрос или AJAX GET запрос с вашими данными.

колбы имеет шесть доступных методов HTTP, из которых нам нужны только GET и POST. Оба возьмут jsdata в качестве параметра, но сделать это по-разному. Вот как два совершенно разных языка в двух разных средах, таких как Python и Javascript exchange данные.

во-первых, создайте маршрут в колбе:

@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return jsdata

или пост один:

@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return jsdata

первый используется /getmethod/<javascript_data> С AJAX GET следующим образом:

$.get( "/getmethod/<javascript_data>" );

второй с помощью "АЯКС" В ДОЛЖНОСТИ запрос:

$.post( "/postmethod", {
    javascript_data: data 
});

здесь javascript_data является либо JSON dict, либо простым значением.

если вы выбираете JSON, убедитесь, что вы конвертируете его в dict в Python:

json.loads(jsdata)[0]

например.

GET:

@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return json.loads(jsdata)[0]

сообщение:

@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return json.loads(jsdata)[0]

Если вам нужно сделать это наоборот, нажав данные Python на Javascript, создайте простой маршрут GET без параметров, который возвращает кодированный JSON dict:

@app.route('/getpythondata')
def get_python_data():
    return json.dumps(pythondata)

извлеките его из JQuery и расшифруйте его:

$.get("/getpythondata", function(data) {
    console.log($.parseJSON(data))
})

на [0] на json.loads(jsdata)[0] есть, потому что, когда вы декодируете кодированный JSON dict в Python, вы получаете список с один дикт внутри, хранится в индексе 0, поэтому ваши декодированные данные JSON выглядят следующим образом:

[{'foo':'bar','baz':'jazz'}] #[0: {'foo':'bar','baz':'jazz'}]

поскольку нам нужен только дикт внутри, а не список, мы получаем элемент, хранящийся в индексе 0, который является дикт.

и import json.

14