JS로 3단계 연계 메뉴를 구현하는 방법을 자세히 설명한 글(아이디어 설명 포함)
- 藏色散人앞으로
- 2022-08-10 17:51:092798검색
아이디어: 각 드롭다운 메뉴는 구성 요소로서 데이터 세트를 수신하고 다양한 데이터 콘텐츠에 따라 다양한 메뉴 옵션을 생성할 수 있습니다. 세 가지 수준 간의 상관 관계는 이벤트 발생을 통해 달성됩니다. 데이터는 백그라운드에서 얻습니다.
성 메뉴를 클릭해 산시성을 선택하면 메뉴 구성요소에서 이벤트 던지기를 통해 현재 성을 버립니다. 지방을 알고 나면 백그라운드에서 해당 지방의 도시 데이터를 얻을 수 있습니다. 등. [관련 권장사항: JavaScript 동영상 튜토리얼]
성취 효과:
백엔드 인터페이스 정보:
3단계 캐스케이딩 메뉴 인터페이스:
## URL: http://10.9 72.245:4010
## 방법: "GET"
## 데이터 형식:
요청: QueryString
응답: JSON
인터페이스 이름:
1. http://10.9.72.245:4010 /getProvince
2. http://10.9.72.245:4010/getCity
3. http://10.9.72.245:4010/getCounty
주 인터페이스 가져오기
인터페이스 이름: /getProvince
요청: 매개변수 없음
응답 :{"province":["Beijing","Tianjin","Hebei",...]}
도시 인터페이스 가져오기:
인터페이스 이름:/getCity
요청:?province="Hebei"
응답: {"city":["Shijiazhuang", "Tangshan", "Qinhuangdao",...]}
카운티 인터페이스 가져오기:
인터페이스 이름: /getCounty
요청: ?city="Shijiazhuang"
응답 : {"county":["Chang'an District", "Qiaodong District", "Qiaoxi District",...]}
구체적 구현:
1. 드롭다운 메뉴 구성요소 및 프런트엔드 생성 백엔드 통신:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import QueryString from './js/QueryString.js';
import DropDownMemu from './js/DropDownMemu.js';
let cityInfo = {};
init();
function init(){
ajax("http://10.9.72.245:4010","getProvince").then(succeseFunction).catch(failFunction);
}
// ajax通信成功后执行：
function succeseFunction(_data){
let data = JSON.parse(_data);
let key = Object.keys(data)[0];
data = Object.values(data)[0];
if(DropDownMemu.Obj[key]){
DropDownMemu.Obj[key].list = data;
DropDownMemu.Obj[key].name = data[0];
}else{
let memu = new DropDownMemu(key);
memu.addEventListener("change",changeHandler);
memu.list = data;
memu.name =data[0];
memu.appendTo("body");
cityInfo[key] = data[0];
}
}
// 当菜单显示内容改变时接收到菜单抛发出的事件并获取事件中携带的信息例如{"province":"陕西"}或者{"city":"西安"}
function changeHandler(e){
let key = e.currentTarget.label;
cityInfo[key] = e.data[key];
let interfaceName;
if(e.data.province){
interfaceName = "getCity";
}else if(e.data.city){
interfaceName = "getCounty";
}else{
return
}
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(succeseFunction).catch(failFunction);
}
/*
ajax通信：
参数列表：
url: 后台服务地址
interfaceType：接口类型，如 "getProvince"
data:传输的数据,例如:{"province":"陕西"}
通信类型type:默认"GET"请求
是否以json格式发送数据：默认为false
*/
function ajax(url,interfaceType,data,type="get",json=false){
type = type.toUpperCase();
let o = type==="GET"? null : data;
if(data) data = json? JSON.stringify(data) : QueryString.stringify(data);
else data = "";
return new Promise(function(resolve,reject){
let xhr = new XMLHttpRequest();
xhr.open(type,url + "/" + interfaceType + (type==="GET"? "?"+data : ""));
xhr.send(o);
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
resolve(xhr.response);
}else if(xhr.readyState===4){
resolve(xhr.status);
}
}
xhr.onerror= function(){
reject(xhr.response);
}
})
}
// ajax通信失败时执行
function failFunction(_err){
console.log(_err);
}
</script>
</body>
</html>2, 드롭다운 메뉴 구성 요소: DropDownMemu 클래스
import Component from "./Component.js";
export default class DropDownMemu extends Component {
_list; // 当前下拉菜单的可选项。
_name; // 当前选择显示的名字例如： "北京"
label; // 当前下拉菜单的标签，province city county
spanLabel; // 标签容器
spanCaret; // 三角形
ul; // 下拉选项容器
bool=false; // 控制鼠标事件，聚焦状态或正在选择时，不触发鼠标划入滑出效果。
// 根据不同的状态设置下拉菜单的样式。
static DROPDOWN = Symbol();
static DEFAULT = Symbol();
// 静态全局变量 每创建一个下拉菜单，都存储到这个对象中，全局管理创建的每一个下拉菜单。
static Obj = {};
constructor(_label) {
super("p");
this.label = _label;
// 创建HTML结构
this.render();
// 设置样式
this.setStyle();
// 鼠标滑入滑出点击，聚焦失焦，点击事件
this.elem.addEventListener("focusin", e =>this.mouseHandler(e));
this.elem.addEventListener("focusout", e =>this.mouseHandler(e));
this.elem.addEventListener("mouseenter", e=>this.mouseHandler(e));
this.elem.addEventListener("mouseleave", e=>this.mouseHandler(e));
this.elem.addEventListener("click", e => this.mouseHandler(e));
}
mouseHandler(e){
switch(e.type){
case "mouseenter":
if(this.bool) return
this.elem.style.backgroundColor = "#e6e6e6";
break;
case "mouseleave":
if(this.bool) return
this.elem.style.backgroundColor = "#fff";
break;
case "focusin":
this.setState(DropDownMemu.DROPDOWN);
this.bool = true;
break;
case "focusout":
this.setState(DropDownMemu.DEFAULT);
this.bool = false;
case "click" :
if(e.target.constructor !== HTMLLIElement) return
this._name = e.target.textContent;
// 当点击时修改当前显示的内容，重设样式，并抛发事件告知外部当前的内容。
this.setContent();
let evt = new FocusEvent("focusout");
this.elem.dispatchEvent(evt);
}
}
set name(_name){
this._name = _name;
this.setContent();
}
get name(){
return this._name;
}
set list(_list){
this._list = _list;
this.ul.innerHTML = "";
this.ul.appendChild(this.createLi());
}
// 修改菜单当前显示的内容并并抛发数据
setContent(_name){
this._name = _name || this._name;
this.spanLabel.textContent = this._name;
let evt = new MouseEvent("change");
if(!evt.data) evt.data = {}
evt.data[this.label] = this._name;
this.dispatchEvent(evt);
}
// 根据指定的list创建下拉菜单选项。
createLi(_list){
this._list = _list || this._list;
let elem = document.createDocumentFragment();
this._list.forEach((item, index) => {
let li = document.createElement("li");
li.textContent = item;
Object.assign(li.style, {
lineHeight:"26px",
padding:"0 15px",
})
elem.appendChild(li);
})
return elem;
}
setState(type){
switch(type){
case DropDownMemu.DROPDOWN:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "block";
break;
case DropDownMemu.DEFAULT:
this.elem.style.backgroundColor = "#fff";
this.ul.style.display = "none";
break;
}
}
appendTo(parent){
super.appendTo(parent);
DropDownMemu.Obj[this.label] = this;
}
render() {
this.elem.setAttribute("tabIndex",1);
this.spanLabel = document.createElement("span");
this.spanCaret = document.createElement("span");
this.ul = document.createElement("ul");
this.elem.appendChild(this.ul);
this.spanLabel.textContent = this._name;
this.elem.appendChild(this.spanLabel);
this.elem.appendChild(this.spanCaret);
}
setStyle() {
Object.assign(this.elem.style, {
float: "left",
minHeight: "20px",
minWidht: "80px",
color: "#333",
fontWeight: "normal",
textAlign: "center",
whiteSpace: "nowrap",
verticalAlign: "middle",
cursor: "pointer",
border: "1px solid #ccc",
borderRadius: "4px",
backgroundColor: "#fff",
padding: "6px 12px",
fontSize: "14px",
userSelect: "none",
marginRight: "100px",
position:"relative",
});
Object.assign(this.spanLabel.style, {
float: "left",
padding: "0 5px"
})
Object.assign(this.spanCaret.style, {
display: "inline-block",
verticalAlign: "middle",
borderTop: "4px dashed",
borderRight: "4px solid transparent",
borderLeft: "4px solid transparent",
})
Object.assign(this.ul.style, {
listStyle: "none",
position: "absolute",
top: "100%",
left: "0",
zIndex: "1000",
minWidth: "100px",
padding: "5px 0px",
margin: "2px 0 0",
fontSize: "14px",
textAlign: "left",
backgroundColor: "#fff",
border: "1px solid rgba(0, 0, 0, 0.15)",
borderRadius: "4px",
boxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)",
display: "none",
})
}
}
3. 구성 요소 상위 클래스:
export default class Component extends EventTarget{
elem;
constructor(_type){
super();
this.elem = this.createElem(_type);
}
createElem(_type){
let elem = document.createElement(_type);
return elem;
}
appendTo(parent){
if(typeof parent==="string") parent = document.querySelector(parent);
parent.appendChild(this.elem);
}
}
4. nodejs 백그라운드 서비스:
let http = require("http");
let querystring = require("querystring");
let data,
req,
res;
// 读取所有城市数据并解析为对象，同步读取。
let fs = require("fs");
let allCityInfo = JSON.parse(fs.readFileSync('./city.json'));
let server = http.createServer(listenerHandler);
server.listen(4010,"10.9.72.245",listenerDoneHandler);
function listenerHandler(_req,_res){
req = _req;
res = _res;
res.writeHead(200,{
"content-type":"text/html;charset=utf-8",
"Access-Control-Allow-Origin":"*",
"Access-Control-Allow-Headers":"*",
});
data="";
req.on("data",function(_data){
data=_data;
})
req.on("end",receiveHandler);
}
function receiveHandler(){
// console.log(allCityInfo);
// 根据请求头的url解析接口类型
let type = req.url.trim().split("?")[0].replace(/\//g,"");
console.log(type);
// 根据请求头的url解析传入的参数
if(req.method.toUpperCase()==="GET"){
if(req.url.includes("favicon.ico")) return res.end();
else data = req.url.includes("?") ? req.url.split("?")[1] : "";
}
try{
data = JSON.parse(data);
}catch{
data = querystring.parse(data);
}
console.log(data);
// 根据接口类型查找数据。
let list = {};
switch(type){
case "getProvince":
list.province = Object.keys(allCityInfo);
break;
case "getCity" :
list.city = Object.keys(allCityInfo[data.province]);
break;
case "getCounty":
list.county = allCityInfo[data.province][data.city];
break;
}
console.log(list);
res.write(JSON.stringify(list));
res.end()
}
function listenerDoneHandler(){
console.log("开启服务成功");
}
5. .json은 아래와 같이 json 형식입니다.
{
"Beijing": {
"Beijing": ["Dongcheng District", "Xicheng District", "Chongwen District", "Xuanwu District", "조양구", "펑타이구", "스징산구", "하이뎬구", "멘토구구", "팡산구", "퉁저우구", "순이구", "창핑구", "다싱구" , "Pinggu District", "Huairou District", "Miyun County", "Yanqing County", "Others"]
},
"Tianjin": {
"Tianjin": ["허핑 구", "허둥 구", "허시 구", "난카이 구", "허베이 구", "홍지 구", "빈하이 신구", "둥리 구", "시" 청구", "진난구", "베이진구", "닝허구", "우칭구", "징하이현", "바오디구", "계현", "탕구구", "한구구", "다강구" 구역", "바오디 구역", "기타"]
},
}
위 내용은 JS로 3단계 연계 메뉴를 구현하는 방법을 자세히 설명한 글(아이디어 설명 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제