继完成静态网页后，引入java script制作动态交互网页，交互逻辑就两个按钮，用于学习网页编程。
from flask import Flask, render_template_string, jsonify, requestapp = Flask(__name__)@app.route('/')
def index():# 使用内联模板渲染一个简单的HTML页面html = '''<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>互动网页示例</title><script>// 定义一个JavaScript函数，用于处理按钮点击事件function updateMessage() {// 使用JavaScript的fetch API发送请求到服务器的'/update'端点fetch('/update').then(response => response.json()).then(data => {// 使用从服务器接收的数据更新页面上的'message'元素document.getElementById('message').textContent = data.message;});}function updateMessage2() {fetch('/update2').then(response => response.json()).then(data => {document.getElementById('message').textContent = data.message;});}</script></head><body><h1>点击按钮看看会发生什么！</h1><button onclick="updateMessage()">你好</button><p id="message">这里将显示消息</p><button onclick="updateMessage2()">再见</button></body></html>'''return render_template_string(html)@app.route('/update', methods=['GET'])
def update():# 处理'/update'端点的GET请求，返回一个JSON响应return jsonify(message='你好！')@app.route('/update2', methods=['GET'])
def update2():# 处理'/update'端点的GET请求，返回一个JSON响应return jsonify(message='再见！')if __name__ == '__main__':app.run(host='0.0.0.0', port=5000)在这个示例中，我们定义了两个路由：
-
根路由
/：当用户访问网站时，将渲染一个包含按钮和段落元素的HTML页面。按钮的onclick事件绑定到updateMessageJavaScript函数。 -
/update路由：当updateMessage函数被触发时，会发送一个GET请求到这个端点。服务器将返回一个JSON对象，其中包含一个消息。
updateMessage 函数使用 fetch API（现代浏览器中的Fetch API用于发起异步HTTP请求）向服务器发送请求，并在收到响应后更新页面上的 message 元素的内容。
运行 app.py 脚本，然后在浏览器中访问 http://0.0.0.0:5000。点击上方按钮，你将看到页面上显示的消息更新为“你好”。再点击下方按钮，消息切换为“再见”。
这个示例演示了客户端和服务器之间的基本交互，其中客户端使用JavaScript处理用户事件，并通过异步请求与服务器通信。服务器响应JSON数据，客户端JavaScript使用这些数据来更新页面内容。
点击按钮看看会发生什么！
你好你好！
再见
)
