Ajax POST возвращает render_template в Flask?

У меня есть какая-то форма, которая должна быть отправлена на сервер (как запрос POST), хранить определенный объект в БД и возвращать новый шаблон с некоторыми данными.

В нормальных условиях это будет нормально работать, но проблема здесь заключается в том, что из данных формы создается довольно сложный объект JSON, и именно это должно быть сохранено в базе данных. JSON успешно восстановлен, но перенаправление шаблона не работает:

@app.route('/entry', methods=['GET', 'POST'])
def entry():
    if request.method == 'GET':
        #Do some stuff
        return render_template('entry.html')

    elif request.method == 'POST':
        #Store the JSON object received and return back a new template with some data
        data = request.json
        db.store(data)
        #Retrieve some other data
        other_data = ...
        return render_template('diary.html', data=other_data)

Я хотел бы знать, каков общий подход в этих ситуациях (я довольно новичок в Python и Flask). Мне кажется, что это не должно быть проблемой, но я не могу найти элегантное решение.

Спасибо заранее.

EDIT:

Я включаю код JS, который был упрощен:

entry.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
            var json = {
                'foo': 1,
                'bar': 2
            }
            $.ajax('entry', {
                type: 'POST',
                data: JSON.stringify(json),
                contentType: 'application/json',
                success: function(data, textStatus, jqXHR){
                    console.log(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    console.log(errorThrown);
                }
            });
        });
    </script>
</body>
</html>

diary.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var data = {{ data|safe }}
        console.log(data);
    </script>
</body>
</html>

Поведение заметили, что шаблон jinja не возвращается, но содержимое HTML-страницы в обратном вызове успеха из запроса POST ajax:

Я хотел бы отобразить новый шаблон с извлеченными данными после этого запроса POST (сделанный через Ajax).

Ответ 1

это поможет вам

!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(function(){
                var json = {
                    'foo': 1,
                    'bar': 2
                }
                $.ajax('entry', {
                    url='type url here',
                    type: 'POST',
                    dataType='json',
                    data: JSON.stringify(json),
                    contentType: 'application/json',
                    success: function(data, textStatus, jqXHR){
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        console.log(errorThrown);
                    }
                });
            });
        </script>
    </body>
    </html>

на заднем конце получайте данные следующим образом

variable=request.get_json()

теперь переменная is dict

Я думаю, это поможет вам

Ответ 2

попробуйте этот код:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
            var json = {
                'foo': 1,
                'bar': 2
            }
            $.ajax('entry', {
                type: 'POST',
                data: JSON.stringify(json),
                contentType: 'application/json',
                success: function(data, textStatus, jqXHR){
                    document.write(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    console.log(errorThrown);
                }
            });
        });
    </script>
</body>
</html>

http://www.w3schools.com/js/js_htmldom_html.asp

Надеюсь, это поможет!