首页 文章

Ajax POST在Flask中返回render_template?

提问于
浏览
13

我有一些应该发送到服务器的表单(作为POST请求),在DB中存储某个对象并返回带有一些数据的新模板 .

在正常情况下,这样可以正常工作,但问题是从表单数据中创建了一个非常复杂的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本身很新) . 对我来说,看起来这不应该是一个问题,但我找不到一个优雅的解决方案 .

提前致谢 .

编辑:

我将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模板,而是来自POST ajax请求的成功回调中的HTML页面内容:

Chrome dev tools shot

我希望在此POST请求之后使用检索到的数据呈现新模板(通过Ajax完成) .

2 回答

  • 0

    试试这段代码:

    <!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

    希望这可以帮助!

  • 1

    this will help you

    !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>
    

    at back end receive data like this way

    variable=request.get_json()
    

    现在变量是dict

    我想这会对你有所帮助

相关问题