아이디어: 각 드롭다운 메뉴는 구성 요소로서 데이터 세트를 수신하고 다양한 데이터 내용을 기반으로 다양한 메뉴 옵션을 생성할 수 있습니다. 세 가지 수준 간의 상관 관계는 이벤트 발생을 통해 달성됩니다. 데이터는 백그라운드에서 가져옵니다.
지방 메뉴를 클릭하여 산시성을 선택하면 메뉴 구성 요소는 이벤트 던지기를 통해 현재 지방을 버립니다. 지방을 알고 나면 백그라운드에서 해당 지방의 도시 데이터를 얻을 수 있습니다. 등.
실현 효과:
## 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",...]}
<!DOCTYPE html>
<html>
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>문서</title>
</head>
<본문>
<스크립트 유형="모듈">
'./js/QueryString.js'에서 QueryString을 가져옵니다.
'./js/DropDownMemu.js'에서 DropDownMemu를 가져옵니다.
cityInfo = {}를 두십시오;
초기화();
함수 초기화(){
ajax("http://10.9.72.245:4010","getProvince").then(successFunction).catch(failFunction);
}
//Ajax 통신 성공 후 실행:
함수 성공Function(_data){
데이터 = JSON.parse(_data);
키 = Object.keys(data)[0];
데이터 = Object.values(data)[0];
if(DropDownMemu.Obj[키]){
DropDownMemu.Obj[key].list = 데이터;
DropDownMemu.Obj[key].name = 데이터[0];
}또 다른{
let memu = new DropDownMemu(key);
memu.addEventListener("change",changeHandler);
memu.list = 데이터;
memu.name =data[0];
memu.appendTo("body");
cityInfo[키] = 데이터[0];
}
}
// 메뉴 표시 내용이 변경되면 메뉴에서 발생하는 이벤트를 수신하고 {"province":"Shaanxi"} 또는 {"city":"Xi'an"}과 같이 이벤트에 포함된 정보를 얻습니다.
함수changeHandler(e){
키 = e.currentTarget.label;
cityInfo[키] = e.data[키];
인터페이스 이름을 보자;
if(e.data.province){
인터페이스이름 = "getCity";
}else if(e.data.city){
인터페이스이름 = "getCounty";
}또 다른{
반품
}
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(successFunction).catch(failFunction);
}
/*
아약스 통신:
매개변수 목록:
url: 백그라운드 서비스 주소 인터페이스 유형: 인터페이스 유형(예: "getProvince")
데이터: 전송된 데이터(예: {"province":"Shaanxi"})
통신 유형 유형: 기본 "GET" json 형식으로 데이터를 보낼지 여부를 요청: 기본값은 false입니다.
*/
함수 ajax(url,interfaceType,data,type="get",json=false){
유형 = type.toUpperCase();
let o = type==="GET"? null: 데이터;
if(data) 데이터 = json? JSON.stringify(data) : QueryString.stringify(data);
그렇지 않으면 데이터 = "";
return new Promise(function(resolve,reject){
xhr = 새로운 XMLHttpRequest()를 보자;
xhr.open(type,url + "/" + 인터페이스 유형 + (type==="GET"? "?"+data : ""));
xhr.send(o);
xhr.onreadystatechange = 함수(){
if(xhr.readyState===4 && xhr.status===200){
해결(xhr.response);
}else if(xhr.readyState===4){
해결(xhr.status);
}
}
xhr.onerror=함수(){
거부(xhr.response);
}
})
}
//Ajax 통신이 실패할 경우 실패Function(_err){ 함수 실행
console.log(_err);
}
</script>
</body>
</html> import Component from "./Component.js";
기본 클래스 내보내기 DropDownMemu는 Component를 확장합니다.
_list; // 현재 드롭다운 메뉴 옵션.
_name; //표시하기 위해 현재 선택한 이름(예: "Beijing")
label; //현재 드롭다운 메뉴의 라벨, 시 군
spaLabel; // 라벨 컨테이너 spaCaret; // 드롭다운 옵션 컨테이너 bool=false; // 마우스 이벤트, 포커스 상태 또는 선택을 제어하고 마우스 슬라이드인 및 슬라이드아웃 효과를 트리거하지 않습니다.
//다양한 상태에 따라 드롭다운 메뉴의 스타일을 설정합니다.
정적 DROPDOWN = 기호();
정적 DEFAULT = 기호();
// 드롭다운 메뉴가 생성될 때마다 정적 전역 변수가 이 객체에 저장되며, 생성된 각 드롭다운 메뉴는 전역적으로 관리됩니다.
정적 객체 = {};
생성자(_label) {
슈퍼("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));
}
마우스 핸들러(e){
스위치(e.type){
"마우스 입력"의 경우:
if(this.bool) 반환
this.elem.style.BackgroundColor = "#e6e6e6";
부서지다;
케이스 "mouseleave":
if(this.bool) 반환
this.elem.style.BackgroundColor = "#fff";
부서지다;
"포커스인"의 경우:
this.setState(DropDownMemu.DROPDOWN);
this.bool = 사실;
부서지다;
"포커스아웃"의 경우:
this.setState(DropDownMemu.DEFAULT);
this.bool = 거짓;
사례 "클릭":
if(e.target.constructor !== HTMLLIElement) 반환
this._name = e.target.textContent;
// 클릭 시 현재 표시된 콘텐츠를 수정하고, 스타일을 재설정하고, 현재 콘텐츠를 외부 세계에 알리는 이벤트를 발생시킵니다.
this.setContent();
let evt = new FocusEvent("focusout");
this.elem.dispatchEvent(evt);
}
}
세트 이름(_name){
this._name = _name;
this.setContent();
}
이름 가져오기(){
this._name을 반환합니다.
}
세트 목록(_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("변경");
if(!evt.data) evt.data = {}
evt.data[this.label] = this._name;
this.dispatchEvent(evt);
}
//지정된 목록을 기반으로 드롭다운 메뉴 옵션을 만듭니다.
createLi(_list){
this._list = _list || this._list;
let elem = document.createDocumentFragment();
this._list.forEach((항목, 색인) => {
let li = document.createElement("li");
li.textContent = 항목;
객체.할당(li.style, {
라인 높이:"26px",
패딩:"0 15px",
})
elem.appendChild(li);
})
요소를 반환;
}
세트상태(유형){
스위치(유형){
DropDownMemu.DROPDOWN:
this.elem.style.BackgroundColor = "#e6e6e6";
this.ul.style.display = "차단";
부서지다;
DropDownMemu.DEFAULT:
this.elem.style.BackgroundColor = "#fff";
this.ul.style.display = "없음";
부서지다;
}
}
추가(부모){
super.appendTo(부모);
DropDownMemu.Obj[this.label] = this;
}
렌더링() {
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);
}
세트스타일() {
객체.할당(this.elem.style, {
플로트: "왼쪽",
최소 높이: "20px",
최소 너비: "80px",
색상: "#333",
글꼴 무게: "보통",
textAlign: "가운데",
공백: "nowwrap",
수직 정렬: "가운데",
커서: "포인터",
테두리: "1px 단색 #ccc",
borderRadius: "4px",
배경색상: "#fff",
패딩: "6px 12px",
글꼴 크기: "14px",
userSelect: "없음",
marginRight: "100px",
위치:"상대적",
});
객체.할당(this.spanLabel.style, {
플로트: "왼쪽",
패딩: "0 5px"
})
객체.할당(this.spanCaret.style, {
디스플레이: "인라인 블록",
수직 정렬: "가운데",
borderTop: "4px 점선",
borderRight: "4px 솔리드 투명",
borderLeft: "4px 솔리드 투명",
})
객체.할당(this.ul.style, {
목록 스타일: "없음",
위치: "절대",
상단: "100%",
왼쪽: "0",
z인덱스: "1000",
최소 너비: "100px",
패딩: "5px 0px",
여백: "2px 0 0",
글꼴 크기: "14px",
textAlign: "왼쪽",
배경색상: "#fff",
테두리: "1px 솔리드 rgba(0, 0, 0, 0.15)",
borderRadius: "4px",
boxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)",
디스플레이: "없음",
})
}
} 기본 클래스 내보내기 구성 요소 확장 EventTarget{
요소;
생성자(_type){
감독자();
this.elem = this.createElem(_type);
}
createElem(_type){
let elem = document.createElement(_type);
요소를 반환;
}
추가(부모){
if(typeof parent==="string") parent = document.querySelector(parent);
parent.appendChild(this.elem);
}
} let http = require("http");
let querystring = require("querystring");
데이터를 보자,
요구,
입술;
// 모든 도시 데이터를 읽고 객체로 구문 분석한 후 동기적으로 읽습니다.
let fs = require("fs");
let allCityInfo = JSON.parse(fs.readFileSync('./city.json'));
서버 = http.createServer(listenerHandler);
server.listen(4010,"10.9.72.245",listenerDoneHandler);
함수 리스너핸들러(_req,_res){
요청 = _req;
입술 = _res;
res.writeHead(200,{
"콘텐츠 유형":"text/html;charset=utf-8",
"액세스 제어-허용-원본":"*",
"액세스 제어-허용 헤더":"*",
});
데이터="";
req.on("data",function(_data){
데이터=_data;
})
req.on("end",receiveHandler);
}
함수 receiveHandler(){
// console.log(allCityInfo);
// 요청 헤더의 URL에 따라 인터페이스 유형을 구문 분석합니다. let type = req.url.trim().split("?")[0].replace(///g,"");
console.log(유형);
// 요청 헤더의 URL에 따라 들어오는 매개변수를 구문 분석합니다. if(req.method.toUpperCase()==="GET"){
if(req.url.includes("favicon.ico")) return res.end();
else data = req.url.includes("?") ? req.url.split("?")[1] : "";
}
노력하다{
데이터 = JSON.parse(데이터);
}잡다{
데이터 = 쿼리스트링.파싱(데이터);
}
console.log(데이터);
//인터페이스 유형에 따라 데이터를 찾습니다.
목록 = {};
스위치(유형){
케이스 "getProvince":
list.province = Object.keys(allCityInfo);
부서지다;
케이스 "getCity":
list.city = Object.keys(allCityInfo[data.province]);
부서지다;
케이스 "getCounty":
list.county = allCityInfo[data.province][data.city];
부서지다;
}
console.log(목록);
res.write(JSON.stringify(목록));
res.end()
}
함수 리스너DoneHandler(){
console.log("서비스가 성공적으로 시작되었습니다.");
} {
"베이징": {
"Beijing": ["Dongcheng District", "Xicheng District", "Chongwen District", "Xuanwu District", "Chaoyang District", "Fengtai District", "Shijingshan District", "Haidian District", "Mentougou District", "Fangshan District", "Tongzhou District", "Shunyi District", "Changping District", "Daxing District", "Pinggu District", "Huairou District", "Miyun County", "Yanqing County", "Others"]
} ,
"천진": {
"천진": ["허핑 구", "허둥 구", "허시 구", "난카이 구", "허베이 구", "훙자오 구", "빈하이 신구", "둥리 구", "시칭 구" 구", "진난 구", "베이첸 구", "닝허 구", "우칭 구", "징하이 현", "바오디 구", "지시안", "탕구 구", "한구 구", "다강 구" ", "Baodi District", "Others"]
},
}
위는 JS를 이용한 3단계 연계 메뉴에 대한 자세한 설명(아이디어 설명 포함)입니다. 자세한 내용은 PHP의 다른 관련 기사를 참고하시기 바랍니다. 중국사이트!
