Python网页版怎样做API接口_Python网页版API接口开发与调用教程-Python教程-PHP中文网

Python网页版怎样做API接口_Python网页版API接口开发与调用教程

看不見的法師

发布： 2025-11-17 23:14:02

原创

684人浏览过

使用Flask和JavaScript可快速构建网页API。1. 用Flask创建返回JSON的后端接口；2. 编写HTML页面通过fetch调用API实现交互；3. 安装flask-cors解决跨域问题；4. 部署时统一接口前缀、关闭debug并考虑Token验证，完成从开发到上线全流程。

python网页版怎样做api接口_python网页版api接口开发与调用教程

想用Python做网页版API接口，其实并不复杂。你只需要一个轻量的Web框架，比如Flask或FastAPI，再配合前端页面就能实现前后端交互。下面一步步带你从创建API到前端调用，完整走通整个流程。

1. 使用Flask快速搭建Python API接口

Flask是Python中最常用的微型Web框架，适合快速开发API。先安装Flask：

pip install flask

然后创建一个简单的API服务，例如返回JSON数据：

app.py

立即学习“Python免费学习笔记（深入）”；

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/hello', methods=['GET'])
def hello():
   return jsonify({"message": "Hello from Python API!"})

@app.route('/api/submit', methods=['POST'])
def submit():
   data = request.get_json()
   name = data.get('name')
   return jsonify({"response": f"Hi {name}, your data was received!"})

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

运行这个脚本后，你的API就在 http://localhost:5000/api/hello 可访问了。

2. 前端网页调用Python API（HTML + JavaScript）

接下来写一个简单的HTML页面，通过JavaScript调用上面的API。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>调用Python API</title>
</head>
<body>
  <h2>测试API调用</h2>
  <button onclick="getHello()">获取问候消息</button>
  <br><br>
  <input type="text" id="nameInput" placeholder="输入你的名字">
  <button onclick="submitData()">提交数据</button>
  <p id="result"></p>

  <script>
    function getHello() {
      fetch('http://localhost:5000/api/hello')
        .then(response => response.json())
        .then(data => {
          document.getElementById("result").innerText = data.message;
        });
    }

    function submitData() {
      const name = document.getElementById("nameInput").value;
      fetch('http://localhost:5000/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name })
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById("result").innerText = data.response;
      });
    }
  </script>
</body>
</html>