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

Question

Я делаю сайт с 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 

Answer 1

Чтобы получить данные из Javascript в Python с Колба, вы либо сделать AJAX POST запрос или AJAX GET запрос с вашими данными.

Колба has six HTTP methods available, из которых нам нужны только ПОЛУЧЕНИЕ И ПОСТ. Оба параметра принимают в качестве параметра значение jsdata, но получают его по-разному. Вот как два совершенно разных языка в двух разных средах, таких как Python и Javascript, обмениваются данными.

Во-первых, создать экземпляр GET маршрут в Колба:

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

или POST одно:

@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>"); 

Второй с помощью запроса AJAX POST:

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

Где javascript_data - это либо JSON dict, либо простое значение.

В случае, если вы выбираете JSON, убедитесь, что вы преобразовать его в Словаре в Python:

json.loads(jsdata)[0] 

Ев.

GET:

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

POST:

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

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

@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, который является dict.

Также import json.