文章目录
- HTTP查询参数请求示例
- [带查询参数的HTTP接口示例------以python flask接口为例](#带查询参数的HTTP接口示例——以python 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示例
-
获取所有省份:
GET http://localhost:5000/api/province
-
获取辽宁省的城市列表:
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();
关键实现说明:
-
查询参数获取:
pythonprovince_name = request.args.get('pname')
这行代码从URL查询字符串中获取名为'pname'的参数。例如,当请求是
/api/city?pname=辽宁省
时,province_name
的值将是"辽宁省"。 -
返回JSON数据:
pythonreturn 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:
javascriptxhr.open('GET','http://localhost:5000/api/city?pname=辽宁省')