Ajax POST 在 Flask 中返回 render_template？

15 投票

2 回答

8600 浏览

提问于 2025-04-18 00:53

我有一个表单，应该把它发送到服务器（作为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还很陌生）。对我来说，这看起来不应该是个问题，但我找不到一个优雅的解决方案。

提前感谢。

编辑：

我把与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开发者工具截图

我希望在这个POST请求（通过Ajax完成）之后，能够用获取到的数据渲染新的模板。

database ajax json web_development jinja flask render_template post_request

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

希望这对你有帮助！

回答于 2025-04-18 由 Python大师

分享举报

这会对你有帮助

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

现在这个变量是一个字典

我觉得这会对你有帮助

回答于 2025-04-18 由 Python大师

分享举报

Ajax POST 在 Flask 中返回 render_template？

2 个回答

撰写回答