前后端交互的简单实现（python+html5+axios）

以下是一个简单的前后端交互示例，前端使用HTML5和Axios，后端使用Python的Flask框架。

后端代码 (Python):




from flask import Flask, jsonify, request
 
app = Flask(__name__)
 
@app.route('/api/data', methods=['GET', 'POST'])
def data_endpoint():
    if request.method == 'POST':
        data = request.json
        # 处理POST请求的数据
        return jsonify({"message": "Data received", "data": data}), 201
    else:
        # 处理GET请求
        return jsonify({"message": "GET request received"}), 200
 
if __name__ == '__main__':
    app.run(debug=True)

确保你已经安装了Flask (pip install Flask).

前端代码 (HTML + Axios):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端交互示例</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>前后端交互示例</h1>
    <button id="get-btn">发送GET请求</button>
    <button id="post-btn">发送POST请求</button>
 
    <script>
        const getBtn = document.getElementById('get-btn');
        const postBtn = document.getElementById('post-btn');
 
        getBtn.addEventListener('click', function() {
            axios.get('/api/data')
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        });
 
        postBtn.addEventListener('click', function() {
            const data = { key: 'value' };
            axios.post('/api/data', data)
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
</body>
</html>

确保你有一个本地的web服务器来托管这个HTML文件，或者你可以将它放在一个静态文件目录下的Flask应用中。

在浏览器中打开这个HTML文件，点击按钮会通过Axios发送相应的GET或POST请求到后端的Flask服务器。后端服务器会根据请求类型处理数据，并返回响应。

前后端交互的简单实现（python+html5+axios）

评论已关闭

推荐阅读