Idee: Jedes Dropdown-Menü kann als Komponente einen Datensatz empfangen und basierend auf unterschiedlichen Dateninhalten unterschiedliche Menüoptionen generieren. Die Korrelation zwischen den drei Ebenen wird durch Event Throwing erreicht. Daten werden aus dem Hintergrund gewonnen.
Wenn Sie auf das Provinzmenü klicken, um Shaanxi auszuwählen, wirft die Menükomponente die aktuelle Provinz durch das Auslösen von Ereignissen aus. Nachdem Sie die Provinz kennen, können Sie die Stadtdaten unter der Provinz aus dem Hintergrund abrufen. Und so weiter.
Realisierungseffekt:
## URL: http://10.9.72.245:4010
## Methode: „GET“
## Datenformat:
Anfrage: QueryString
Antwort:
1. http://10.9.72.245:4010/getProvince
2. http://10.9.72.245:4010/getCity 3. http://10.9.72.245:4010/getCounty
Rufen Sie denSchnittstellennamen
Request
: Keine Parameter
Antwort: { "province":["Peking", "Tianjin", "Hebei",...]}
Schnittstellenname:/getCity
request:?province="Hebei"
Antwort: {"city ":["Shijiazhuang" , "Tangshan", "Qinhuangdao",...]}
Schnittstellenname: /getCounty
Anfrage: ?city="Shijiazhuang"
Antwort: {"county":["Chang'an District ", „Qiaodong District“, „Qiaoxi District“,...]}
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokument</title>
</head>
<Körper>
<script type="module">
QueryString aus './js/QueryString.js' importieren;
DropDownMemu aus './js/DropDownMemu.js' importieren;
let cityInfo = {};
init();
Funktion init(){
ajax("http://10.9.72.245:4010","getProvince").then(successFunction).catch(failFunction);
}
//Nach erfolgreicher Ajax-Kommunikation ausführen:
Funktion erfolgreichFunktion(_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];
}anders{
let memu = new DropDownMemu(key);
memu.addEventListener("change",changeHandler);
memu.list = Daten;
memu.name =data[0];
memu.appendTo("body");
cityInfo[key] = data[0];
}
}
// Wenn sich der Inhalt der Menüanzeige ändert, empfangen Sie das vom Menü ausgelöste Ereignis und rufen Sie die im Ereignis enthaltenen Informationen ab, z. B. {"Provinz": "Shaanxi"} oder {"Stadt": "Xi'an"}
Funktion 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";
}anders{
zurückkehren
}
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(successeFunction).catch(failFunction);
}
/*
Ajax-Kommunikation:
Parameterliste:
URL: Hintergrunddienstadresse interfaceType: Schnittstellentyp, z. B. „getProvince“
Daten: übertragene Daten, zum Beispiel: {"Provinz": "Shaanxi"}
Kommunikationstyptyp: Standard „GET“-Anfrage, ob Daten im JSON-Format gesendet werden sollen: Der Standardwert ist „false“.
*/
Funktion 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);
sonst 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){
lösen(xhr.response);
}else if(xhr.readyState===4){
lösen(xhr.status);
}
}
xhr.onerror= function(){
abweisen(xhr.response);
}
})
}
//Funktion failFunction(_err){ ausführen, wenn die Ajax-Kommunikation fehlschlägt
console.log(_err);
}
</script>
</body>
</html> import Component from „./Component.js“;
Standardklasse exportieren DropDownMemu erweitert Component {
_list; // Aktuelle Dropdown-Menüoptionen.
_name; //Der aktuell ausgewählte Name, der angezeigt werden soll, zum Beispiel: „Peking“
label; //Die Beschriftung des aktuellen Dropdown-Menüs, Provinz, Stadt, Landkreis
spanLabel; // Container beschriften spanCaret; // Drop-Down-Option Container bool=false;
//Legen Sie den Stil des Dropdown-Menüs entsprechend den verschiedenen Zuständen fest.
static DROPDOWN = Symbol();
static DEFAULT = Symbol();
// Statische globale Variablen werden jedes Mal in diesem Objekt gespeichert, wenn ein Dropdown-Menü erstellt wird, und jedes erstellte Dropdown-Menü wird global verwaltet.
static Obj = {};
Konstruktor(_label) {
super("p");
this.label = _label;
//HTML-Struktur erstellen this.render();
//Legen Sie den Stil fest this.setStyle();
// Die Maus gleitet hinein und heraus und klickt, der Fokus ist unscharf, das Klickereignis 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){
Fall „mouseenter“:
if(this.bool) zurückgeben
this.elem.style.backgroundColor = "#e6e6e6";
brechen;
Fall „mouseleave“:
if(this.bool) zurückgeben
this.elem.style.backgroundColor = "#fff";
brechen;
Fall „focusin“:
this.setState(DropDownMemu.DROPDOWN);
this.bool = true;
brechen;
Fall „focusout“:
this.setState(DropDownMemu.DEFAULT);
this.bool = false;
Fall „Klick“:
if(e.target.constructor !== HTMLLIElement) zurückgeben
this._name = e.target.textContent;
// Beim Klicken den aktuell angezeigten Inhalt ändern, den Stil zurücksetzen und Ereignisse auslösen, um die Außenwelt über den aktuellen Inhalt zu informieren.
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());
}
// Den aktuell angezeigten Inhalt des Menüs ändern und den Datensatz auslösen 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);
}
//Erstelle eine Dropdown-Menüoption basierend auf der angegebenen Liste.
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);
})
Rückgabeelement;
}
setState(type){
Schalter(Typ){
Fall DropDownMemu.DROPDOWN:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "block";
brechen;
Fall DropDownMemu.DEFAULT:
this.elem.style.backgroundColor = "#fff";
this.ul.style.display = "none";
brechen;
}
}
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: „links“,
minHeight: „20px“,
minBreite: „80px“,
Farbe: „#333“,
FontWeight: „normal“,
textAlign: „center“,
whiteSpace: „nowrap“,
VerticalAlign: „Mitte“,
Cursor: „Zeiger“,
Grenze: „1px solid #ccc“,
borderRadius: „4px“,
Hintergrundfarbe: „#fff“,
Polsterung: „6px 12px“,
Schriftgröße: „14px“,
userSelect: „none“,
marginRight: „100px“,
Position:"relativ",
});
Object.assign(this.spanLabel.style, {
float: „links“,
Polsterung: „0 5px“
})
Object.assign(this.spanCaret.style, {
Anzeige: „inline-block“,
VerticalAlign: „Mitte“,
borderTop: „4px gestrichelt“,
borderRight: „4px solide transparent“,
borderLeft: „4px solide transparent“,
})
Object.assign(this.ul.style, {
listStyle: „none“,
Position: „absolut“,
oben: „100 %“,
links: „0“,
zIndex: „1000“,
Mindestbreite: „100 Pixel“,
Auffüllung: „5px 0px“,
Rand: „2px 0 0“,
Schriftgröße: „14px“,
textAlign: „links“,
Hintergrundfarbe: „#fff“,
Grenze: „1px solid rgba(0, 0, 0, 0.15)“,
borderRadius: „4px“,
boxShadow: „0 6px 12px rgba(0, 0, 0, 0,175)“,
Anzeige: „keine“,
})
}
} Standardklasse exportieren. Komponente erweitert EventTarget{
elem;
Konstruktor(_type){
super();
this.elem = this.createElem(_type);
}
createElem(_type){
let elem = document.createElement(_type);
Rückgabeelement;
}
appendTo(parent){
if(typeof parent==="string") parent = document.querySelector(parent);
parent.appendChild(this.elem);
}
} let http = require("http");
let querystring = require("querystring");
Daten lassen,
erforderlich,
res;
// Alle Stadtdaten lesen, in Objekte analysieren und synchron lesen.
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);
Funktion 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);
}
Funktion „receiveHandler()“
// console.log(allCityInfo);
// Analysieren Sie den Schnittstellentyp gemäß der URL des Anforderungsheaders let type = req.url.trim().split("?")[0].replace(///g,"");
console.log(type);
// Analysieren Sie die eingehenden Parameter gemäß der URL des Anforderungsheaders if(req.method.toUpperCase()==="GET"){
if(req.url.includes("favicon.ico")) return res.end();
else data = req.url.includes("?") ? req.url.split("?")[1] : "";
}
versuchen{
data = JSON.parse(data);
}fangen{
data = querystring.parse(data);
}
console.log(data);
//Daten basierend auf dem Schnittstellentyp finden.
let list = {};
Schalter(Typ){
Fall „getProvince“:
list.province = Object.keys(allCityInfo);
brechen;
Fall „getCity“:
list.city = Object.keys(allCityInfo[data.province]);
brechen;
Fall „getCounty“:
list.county = allCityInfo[data.province][data.city];
brechen;
}
console.log(list);
res.write(JSON.stringify(list));
res.end()
}
Funktion listenerDoneHandler(){
console.log("Dienst erfolgreich gestartet");
} {
„Peking“: {
„Peking“: [„Bezirk Dongcheng“, „Bezirk Xicheng“, „Bezirk Chongwen“, „Bezirk Xuanwu“, „Bezirk Chaoyang“, „Bezirk Fengtai“, „Bezirk Shijingshan“, „Bezirk Haidian“, „Bezirk Mentougou“, „Bezirk Fangshan“, „Bezirk Tongzhou“, „Bezirk Shunyi“, „Bezirk Changping“, „Bezirk Daxing“, „Bezirk Pinggu“, „Bezirk Huairou“, „Bezirk Miyun“, „Bezirk Yanqing“, „Andere“]
} ,
„Tianjin“: {
„Tianjin“: [„Bezirk Heping“, „Bezirk Hedong“, „Bezirk Hexi“, „Bezirk Nankai“, „Bezirk Hebei“, „Bezirk Hongjiao“, „Neuer Bezirk Binhai“, „Bezirk Dongli“, „Bezirk Xiqing“ Bezirk“, „Bezirk Jinnan“, „Bezirk Beichen“, „Bezirk Ninghe“, „Bezirk Wuqing“, „Bezirk Jinghai“, „Bezirk Baodi“, „Jixian“, „Bezirk Tanggu“, „Bezirk Hangu“, „Bezirk Dagang“. ", "Baodi District", "Others"]
},
}
Das Obige ist eine detaillierte Erklärung des dreistufigen Verknüpfungsmenüs mit JS (mit Erläuterung der Ideen). Weitere Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!
