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

文章目录

HTTP查询参数请求示例

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

代码示例

html 复制代码
<!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

python 复制代码
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)
pip 复制代码
Flask==2.3.2
Flask-CORS==4.0.0

README.md

markdown 复制代码
# 城市数据API服务
这是一个简单的Flask应用,提供省份和城市数据的API接口。

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

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

运行应用

bash 复制代码
python app.py

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

API示例

  1. 获取所有省份:

    复制代码
    GET http://localhost:5000/api/province
  2. 获取辽宁省的城市列表:

    复制代码
    GET http://localhost:5000/api/city?pname=辽宁省

客户端示例

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

javascript 复制代码
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();

关键实现说明:

  1. 查询参数获取

    python 复制代码
    province_name = request.args.get('pname')

    这行代码从URL查询字符串中获取名为'pname'的参数。例如,当请求是/api/city?pname=辽宁省时,province_name的值将是"辽宁省"。

  2. 返回JSON数据

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

运行方法:

  1. 安装依赖:

    复制代码
    pip install -r requirements.txt
  2. 运行应用:

    复制代码
    python app.py
  3. 应用将在http://localhost:5000启动,可以通过浏览器或XHR访问API。

  4. 修改前端代码中的URL,将其指向本地Flask服务器而非原来的URL:

    javascript 复制代码
    xhr.open('GET','http://localhost:5000/api/city?pname=辽宁省')
相关推荐
写代码的小王吧2 分钟前
【网络安全】 防火墙技术
java·python·安全·web安全·网络安全·docker
x66ccff6 分钟前
[特殊字符] Pandas 常用操作对比:Python 运算符 vs Pandas 函数
开发语言·python·pandas
小白的高手之路23 分钟前
torch.nn中的非线性激活介绍合集——Pytorch中的非线性激活
人工智能·pytorch·python·深度学习·神经网络·机器学习·cnn
逆风优雅32 分钟前
python 爬取网站图片的小demo
开发语言·python
小徐Chao努力37 分钟前
【计网】HTTP协议 1.0/1.1/2.0详解
网络·网络协议·http
码界筑梦坊43 分钟前
基于Pyhon的京东笔记本电脑数据可视化分析系统
python·信息可视化·数据分析·毕业设计·电脑·销量预测
stevenzqzq1 小时前
kotlin中主构造函数是什么
开发语言·python·kotlin
了不起的码农1 小时前
几种常见的HTTP方法之GET和POST
网络·网络协议·http
Tttian6221 小时前
Python办公自动化(2)对word&pdf的操作
开发语言·python
HNU混子1 小时前
手搓多模态-03 顶层和嵌入层的搭建
python·机器学习·计算机视觉