当前位置：首页 > news >正文

HTTP查询参数示例（XMLHttpRequest查询参数）（带查询参数的HTTP接口示例——以python flask接口为例）flask查询接口

news 2025/7/5 12:43:47

文章目录

HTTP查询参数请求示例
- 接口文档——获取城市列表
- 代码示例
- 效果
带查询参数的HTTP接口示例——以python flask接口为例
- app.py
- README.md
- 运行应用
- API示例
- 客户端示例
- - 关键实现说明：
  - 运行方法：

HTTP查询参数请求示例

接口文档——获取城市列表

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 确保IE浏览器使用最新的渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置viewport以确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市列表查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        h2 {
            color: #333;
        }
        
        .city-p {
            line-height: 1.8;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h2>城市列表查询</h2>
    <p class="city-p"></p>

    <script>
        // 目标:使用XHR携带查询参数，展示某个省下属的城市列表

        // 1. 创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest()

        // 2. 配置请求方法和URL（携带查询参数pname=辽宁省）
        xhr.open('GET','http://hmajax.itheima.net/api/city?pname=辽宁省')

        // 3. 监听loadend事件，接收响应结果
        xhr.addEventListener('loadend',()=>{
            // 打印原始响应数据
            console.log(xhr.response)
            
            // 将响应数据从JSON字符串解析为JavaScript对象
            const data = JSON.parse(xhr.response)
            
            // 打印解析后的数据对象
            console.log(data)
            
            // 将城市列表数据渲染到页面，使用<br>标签分隔每个城市
            document.querySelector('.city-p').innerHTML = data.list.join('<br>')
        })

        // 4. 发起请求
        xhr.send()
    </script>
</body>

</html>

效果

在这里插入图片描述

带查询参数的HTTP接口示例——以python flask接口为例

在Flask中实现带查询参数的HTTP接口非常简单。以下是对应的Flask后端实现代码：

app.py

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 启用CORS，允许跨域请求
CORS(app)

# 省份及其城市数据
province_cities = {
    "辽宁省": ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
    "吉林省": ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边"],
    "黑龙江省": ["哈尔滨", "齐齐哈尔", "牡丹江", "佳木斯", "大庆", "绥化", "鹤岗", "鸡西", "黑河", "双鸭山", "伊春", "七台河", "大兴安岭"],
    "河北省": ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],
    "山西省": ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"]
}

@app.route('/api/city', methods=['GET'])
def get_cities():
    """获取指定省份的城市列表
    
    查询参数:
        pname: 省份名称，例如"辽宁省"
    
    返回:
        JSON对象，包含状态码、消息和城市列表
    """
    # 从查询参数中获取省份名称
    province_name = request.args.get('pname')
    
    # 检查参数是否存在
    if not province_name:
        return jsonify({
            "code": 400,
            "message": "请提供省份名称",
            "list": []
        }), 400
    
    # 检查省份是否存在
    if province_name not in province_cities:
        return jsonify({
            "code": 404,
            "message": f"未找到省份: {province_name}",
            "list": []
        }), 404
    
    # 返回该省份的城市列表
    return jsonify({
        "code": 200,
        "message": "获取城市列表成功",
        "list": province_cities[province_name]
    })

@app.route('/api/province', methods=['GET'])
def get_provinces():
    """获取所有省份列表
    
    返回:
        JSON对象，包含状态码、消息和省份列表
    """
    return jsonify({
        "code": 200,
        "message": "获取省份列表成功", 
        "list": list(province_cities.keys())
    })

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

Flask==2.3.2
Flask-CORS==4.0.0

README.md

# 城市数据API服务
这是一个简单的Flask应用，提供省份和城市数据的API接口。

## 功能
- `/api/province` - 获取所有省份列表
- `/api/city?pname=省份名称` - 获取指定省份的城市列表

## 安装依赖
pip install -r requirements.txt

运行应用

python app.py

应用将在 http://localhost:5000 运行。

API示例

获取所有省份：
```
GET http://localhost:5000/api/province
```

获取辽宁省的城市列表：

GET http://localhost:5000/api/city?pname=辽宁省

客户端示例

在HTML文件中通过XMLHttpRequest调用API：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:5000/api/city?pname=辽宁省');
xhr.addEventListener('loadend', () => {
    const data = JSON.parse(xhr.response);
    document.querySelector('.city-p').innerHTML = data.list.join('<br>');
});
xhr.send();

关键实现说明：

查询参数获取：
```
province_name = request.args.get('pname')
```
这行代码从URL查询字符串中获取名为’pname’的参数。例如，当请求是/api/city?pname=辽宁省时，province_name的值将是"辽宁省"。

返回JSON数据：

return jsonify({
    "code": 200,
    "message": "获取城市列表成功",
    "list": province_cities[province_name]
})

运行方法：

安装依赖：
```
pip install -r requirements.txt
```
运行应用：
```
python app.py
```
应用将在http://localhost:5000启动，可以通过浏览器或XHR访问API。
修改前端代码中的URL，将其指向本地Flask服务器而非原来的URL：
```
xhr.open('GET','http://localhost:5000/api/city?pname=辽宁省')
```