Flask+ajax实现动态更新div

作者：System 时间：2024年08月10日分类：所有,ajax 字数：1527

以下是一个使用Flask和AJAX实现动态更新div内容的简单示例。

首先，这是Flask后端代码:




from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/update_div', methods=['POST'])
def update_div():
    # 假设这是一些动态数据获取逻辑
    data = {'key': 'value'}
    return jsonify(data)
 
if __name__ == '__main__':
    app.run(debug=True)

然后，这是HTML模板代码 (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Update Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#update-button").click(function() {
                $.ajax({
                    url: '/update_div',
                    type: 'POST',
                    data: {},
                    success: function(response) {
                        // 假设返回的数据是JSON对象
                        var value = response.key;
                        $("#dynamic-content").html(value);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="dynamic-content">Initial Content</div>
    <button id="update-button">Update Div</button>
</body>
</html>

在这个例子中，当用户点击"Update Div"按钮时，AJAX请求会发送到/update_div路由。Flask后端处理请求，执行必要的数据库查询或计算，并以JSON格式返回数据。然后，AJAX成功回调函数更新了页面上的div元素内容。

确保你的Flask应用运行在一个活跃的服务器上，并且修改script标签中的jQuery库URL以确保它指向一个有效的jQuery版本。

Flask+ajax实现动态更新div

评论已关闭

推荐阅读