设计在线设计网站大型网站 jquery
文章目录
- 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 CORSapp = 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=辽宁省')