以下是一个使用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版本。