python falsk 通过 ajax 按钮更新文字前端和后端代码

在Python Flask应用中，结合Ajax技术实现按钮点击后前端页面动态更新文字，通常涉及到前后端交互的过程。以下是简单的步骤：

**前端（HTML + JavaScript，使用jQuery或axios）**:

<!-- 假设你的HTML中有这样一个按钮 -->
<button id="updateButton">点击更新</button>
<div id="content"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 如果使用jQuery -->
<script>
$(document).ready(function(){
    $("#updateButton").click(function() {
        $.ajax({
            url: '/update_content',  // 发送请求到Flask的URL
            type: 'GET',  // 使用GET方法
            success: function(data) {  // 成功回调
                $('#content').text(data);  // 更新内容区域的文字
            },
            error: function(xhr, status, error) {
                console.error('Ajax请求失败:', error);
            }
        });
    });
});
</script>

**后端（Flask）**:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/update_content', methods=['GET'])
def update_content():
    # 这里可以根据需要生成新的文本
    new_text = "这是从服务器返回的新内容"
    
    return jsonify({'content': new_text})  # 返回JSON格式的数据

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

当用户点击前端的"更新"按钮时，会发送一个GET请求到`/update_content`这个URL，Flask后端处理这个请求并生成新的内容，然后将新内容作为响应返回给前端。前端接收到响应后，替换`#content`元素的内容。