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

在Python Flask应用中，使用AJAX技术动态更新前端内容通常涉及到前后端两个部分：

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

<!-- HTML -->
<button id="update-button">点击更新</button>
<div id="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#update-button").click(function() {
    $.ajax({
      url: "/update",
      type: "GET", // 或者"POST"，取决于Flask端的处理方式
      success: function(response) {
        $('#output').text(response); // 更新显示的文字
      },
      error: function(err) {
        console.error("AJAX请求失败:", err);
      }
    });
  });
});
</script>

**后端（Flask Python）**:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/update', methods=['GET'])
def update_text():
    # 这里可以根据需要从数据库或其他数据源获取新文本
    new_text = "新的文本内容"
    
    return jsonify({"text": new_text})  # 返回JSON格式的数据

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

在这个例子中，当用户点击按钮时，会发起一个HTTP GET请求到`/update`路由，服务器接收到请求后返回一个包含新文本的JSON响应。前端接收到响应后，替换`#output`元素的内容。