Flask Flask jinja2不刷新页面更新div内容

在本文中，我们将介绍如何使用Flask和jinja2来实现在不刷新页面的情况下更新div内容。Flask是一个基于Python的微型web框架，而jinja2则是Flask中默认的模板引擎。

阅读更多：Flask 教程

1. 安装Flask和jinja2

首先，我们需要安装Flask和jinja2。可以使用pip来安装这两个库：

pip install flask
pip install jinja2

2. 创建Flask应用

在开始之前，我们需要创建一个Flask应用。可以创建一个Python脚本，命名为app.py，并在其中导入Flask库：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在这个脚本中，我们创建了一个名为app的Flask应用，并定义了一个路由/，它将返回一个名为index.html的模板。

3. 创建前端模板

接下来，我们需要创建一个前端模板index.html，它将作为我们的主页。可以在项目目录下创建一个名为templates的文件夹，并在其中创建index.html文件。在这个文件中，我们可以添加一个div元素，它将用于展示我们更新后的内容：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Jinja2 Demo</title>
</head>
<body>
    <h1>Welcome to Flask Jinja2 Demo!</h1>
    <div id="content">
        This content will be updated without refreshing the page.
    </div>
    <button onclick="updateContent()">Update Content</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function updateContent() {
             $.ajax({ url: '/update_content', type: 'POST', success: function(response) {$ ('#content').text(response.content);
                }
            });
        }
    </script>
</body>
</html>

在这个模板中，我们添加了一个按钮，它将触发一个JavaScript函数updateContent()。这个函数将通过AJAX请求向服务器发送POST请求，并将服务器返回的内容更新到content元素中。

4. 添加路由和视图函数

现在，我们需要在app.py中添加一个新的路由和相应的视图函数，用于处理更新内容的请求。

from flask import request, jsonify

@app.route('/update_content', methods=['POST'])
def update_content():
    new_content = 'This is the updated content!'
    return jsonify({'content': new_content})

在这个视图函数中，我们生成了一个新的内容This is the updated content!，并通过JSON格式返回给前端。