Python创建可点击网页_网页点击代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_61092302/article/details/138632261

继完成静态网页后，引入java script制作动态交互网页，交互逻辑就两个按钮，用于学习网页编程。

from flask import Flask, render_template_string, jsonify, request

app = 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 事件绑定到 updateMessage JavaScript函数。
/update 路由：当 updateMessage 函数被触发时，会发送一个GET请求到这个端点。服务器将返回一个JSON对象，其中包含一个消息。

updateMessage 函数使用 fetch API（现代浏览器中的Fetch API用于发起异步HTTP请求）向服务器发送请求，并在收到响应后更新页面上的 message 元素的内容。

运行 app.py 脚本，然后在浏览器中访问 http://0.0.0.0:5000。点击上方按钮，你将看到页面上显示的消息更新为“你好”。再点击下方按钮，消息切换为“再见”。

这个示例演示了客户端和服务器之间的基本交互，其中客户端使用JavaScript处理用户事件，并通过异步请求与服务器通信。服务器响应JSON数据，客户端JavaScript使用这些数据来更新页面内容。