文章目錄
- 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=遼寧省')
)
-audiopolicyservice介紹)
