الفكرة: يمكن لكل قائمة منسدلة، باعتبارها مكونًا، تلقي مجموعة من البيانات وإنشاء خيارات قائمة مختلفة بناءً على محتويات البيانات المختلفة. يتم تحقيق الارتباط بين المستويات الثلاثة من خلال رمي الحدث. يتم الحصول على البيانات من الخلفية.
عند النقر على قائمة المقاطعة لتحديد شنشي، سيقوم مكون القائمة بحذف المقاطعة الحالية من خلال رمي الحدث. بعد معرفة المحافظة، يمكنك الحصول على بيانات المدينة ضمن المحافظة من الخلفية. وهكذا.
تأثير الإدراك:
## URL: http://10.9.72.245:4010
## الطريقة: "GET"
## تنسيق البيانات:
الطلب: استجابة سلسلة الاستعلام
: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
request:?province="Hebei"
الاستجابة: {"city ":["Shijiazhuang" , "Tangshan"، "Qinhuangdao"،...]}
اسم الواجهة:
طلب /getCounty: استجابة ?city="Shijiazhuang"
: {"county":["Chang'an District" "، "Qiaodong District"، "Qiaoxi District"،...]}
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<meta name="viewport" content="width=device-width, original-scale=1.0">
<العنوان>المستند</title>
</الرأس>
<الجسم>
<نوع البرنامج النصي = "الوحدة النمطية">
استيراد QueryString من './js/QueryString.js'؛
استيراد DropDownMemu من './js/DropDownMemu.js'؛
دع cityInfo = {};
الحرف الأول () ؛
وظيفة الحرف الأول () {
ajax("http://10.9.72.245:4010"،"getProvince").then(successFunction).catch(failFunction);
}
// يتم التنفيذ بعد اتصال أجاكس الناجح:
وظيفة النجاحFunction(_data){
دع البيانات = JSON.parse(_data);
Let key = Object.keys(data)[0];
البيانات = Object.values(data)[0];
إذا (DropDownMemu.Obj[مفتاح]){
DropDownMemu.Obj[key].list = data;
DropDownMemu.Obj[key].name = data[0];
}آخر{
Let memu = new DropDownMemu(key);
memu.addEventListener("change",changeHandler);
memu.list = data;
memu.name =data[0];
memu.appendTo("body");
cityInfo[key] = data[0];
}
}
// عندما يتغير محتوى عرض القائمة، استقبل الحدث الذي ألقته القائمة واحصل على المعلومات الموجودة في الحدث، مثل {"province": "Shaanxi"} أو {"city": "Xi'an"}
وظيفة تغيير المعالج (ه) {
Let key = e.currentTarget.label;
cityInfo[key] = e.data[key];
دع اسم الواجهة؛
إذا (e.data.province) {
اسم الواجهة = "getCity";
}آخر إذا(e.data.city){
اسم الواجهة = "getCounty";
}آخر{
يعود
}
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(successeFunction).catch(failFunction);
}
/*
اتصالات اياكس:
قائمة المعلمات:
عنوان url: واجهة عنوان خدمة الخلفية النوع: نوع الواجهة، مثل "getProvince"
البيانات: البيانات المنقولة، على سبيل المثال: {"province": "Shaanxi"}
نوع نوع الاتصال: طلب "GET" الافتراضي لإرسال البيانات بتنسيق json: الافتراضي هو خطأ
*/
وظيفة اياكس (url،interfaceType،data،type = "get"، json = false) {
type = type.toUpperCase();
Let o = type===GET" null : data;
إذا (بيانات) بيانات = JSON.stringify (بيانات) : QueryString.stringify (بيانات)؛
بيانات أخرى = ""؛
إرجاع وعد جديد(وظيفة(حل,رفض){
Let xhr = new XMLHttpRequest();
xhr.open(type,url + "/" +interfaceType + (type==="GET"? "؟"+data : ""));
xhr.send(o);
xhr.onreadystatechange = function(){
إذا (xhr.readyState===4 && xhr.status===200){
حل (xhr.response)؛
}else if(xhr.readyState===4){
حل (xhr.status)؛
}
}
xhr.onerror= وظيفة(){
رفض (xhr.response)؛
}
})
}
// تنفيذ الوظيفة FailFunction(_err){ عندما يفشل اتصال أجاكس
console.log(_err);
}
</script>
</الجسم>
</html> مكون استيراد فئة DropDownMemu من "./Component.js"؛
تصدير الفئة الافتراضية DropDownMemu يمتد المكون {
_list; // خيارات القائمة المنسدلة الحالية.
_name; // الاسم المحدد حاليًا للعرض، على سبيل المثال: "بكين"
label; // تسمية القائمة المنسدلة الحالية، المقاطعة، المدينة
// حاوية التسميةspanCaret; // Triangle ul; // حاوية خيار القائمة المنسدلة bool=false;
// قم بتعيين نمط القائمة المنسدلة وفقًا للحالات المختلفة.
DROPDOWN ثابت = الرمز ()؛
الافتراضي الثابت = الرمز () ؛
// يتم تخزين المتغيرات العامة الثابتة في هذا الكائن في كل مرة يتم فيها إنشاء قائمة منسدلة، وتتم إدارة كل قائمة منسدلة تم إنشاؤها عالميًا.
كائن ثابت = {}؛
منشئ (_label) {
سوبر("ص");
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));
}
معالج الماوس (ه) {
التبديل (النوع الإلكتروني) {
حالة "مدخل الماوس":
إذا عاد (this.bool).
this.elem.style.backgroundColor = "#e6e6e6";
استراحة؛
حالة "ترك الماوس":
إذا عاد (this.bool).
this.elem.style.backgroundColor = "#fff";
استراحة؛
حالة "التركيز":
this.setState(DropDownMemu.DROPDOWN);
this.bool = true;
استراحة؛
حالة "التركيز":
this.setState(DropDownMemu.DEFAULT);
this.bool = false;
حالة "انقر" :
إذا كان (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();
}
الحصول على الاسم (){
إرجاع هذا._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("change");
إذا (!evt.data) evt.data = {}
evt.data[this.label] = this._name;
this.dispatchEvent(evt);
}
// أنشئ خيار قائمة منسدلة بناءً على القائمة المحددة.
إنشاء لي (_ قائمة) {
this._list = _list ||. this._list;
Let elem = document.createDocumentFragment();
this._list.forEach((العنصر، الفهرس) => {
Let li = document.createElement("li");
li.textContent = item;
كائن.تعيين(li.style, {
ارتفاع الخط: "26 بكسل"،
الحشو: "0 15 بكسل"،
})
elem.appendChild(li);
})
عنصر الإرجاع؛
}
مجموعة الحالة (النوع) {
التبديل (النوع) {
حالة DropDownMemu.DROPDOWN:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "block";
استراحة؛
حالة DropDownMemu.DEFAULT:
this.elem.style.backgroundColor = "#fff";
this.ul.style.display = "none";
استراحة؛
}
}
إلحاق إلى (الأصل) {
super.appendTo(parent);
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);
}
سيت ستايل () {
Object.assis(this.elem.style, {
تعويم: "يسار"،
الحد الأدنى للارتفاع: "20 بكسل"،
الحد الأدنى للعرض: "80 بكسل"،
اللون: "#333"،
وزن الخط: "عادي"،
محاذاة النص: "المركز"،
مسافة بيضاء: "nowrap"،
محاذاة عمودية: "وسط"،
المؤشر: "المؤشر"،
الحدود: "1px صلب #ccc"،
نصف قطر الحدود: "4 بكسل"،
لون الخلفية: "#fff"،
الحشو: "6 بكسل 12 بكسل"،
حجم الخط: "14 بكسل"،
تحديد المستخدم: "لا شيء"،
الهامش الأيمن: "100 بكسل"،
الموقف: "نسبي"،
});
Object.assis(this.spanLabel.style, {
تعويم: "يسار"،
الحشو: "0 5 بكسل"
})
Object.assis(this.spanCaret.style, {
عرض: "كتلة مضمنة"،
محاذاة عمودية: "وسط"،
borderTop: "4px متقطع"،
BorderRight: "4 بكسل شفاف صلب"،
borderLeft: "4px شفاف صلب"،
})
Object.assis(this.ul.style, {
نمط القائمة: "لا شيء"،
الموقف: "المطلق"،
أعلى: "100%"،
اليسار: "0"،
فهرس: "1000"،
الحد الأدنى للعرض: "100 بكسل"،
الحشو: "5px 0px"،
الهامش: "2px 0 0"،
حجم الخط: "14 بكسل"،
محاذاة النص: "يسار"،
لون الخلفية: "#fff"،
الحدود: "1px rgba الصلبة (0، 0، 0، 0.15)"،
نصف قطر الحدود: "4px"،
boxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)"،
عرض: "لا شيء"،
})
}
} فئة التصدير الافتراضية Component Extends EventTarget{
العنصر؛
منشئ (_نوع) {
ممتاز()؛
this.elem = this.createElem(_type);
}
إنشاءElem(_type){
Let elem = document.createElement(_type);
عنصر الإرجاع؛
}
إلحاق إلى (الأصل) {
if(typeofparent==="string")parent = document.querySelector(parent);
parent.appendChild(this.elem);
}
} Let http = require("http");
دع 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);
وظيفة المستمعHandler(_req,_res){
req = _req;
الدقة = _res;
ريزر.كتابة الرأس(200,{
"content-type": "text/html;charset=utf-8"،
""التحكم في الوصول-السماح-الأصل":":*,
"التحكم في الوصول-السماح-بالرؤوس":":*"،
});
البيانات = ""؛
req.on("بيانات"،وظيفة(_بيانات){
data=_data;
})
req.on("end",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();
بيانات أخرى = req.url.includes("؟") ? req.url.split("؟")[1] : "";
}
يحاول{
البيانات = JSON.parse(data);
}يمسك{
data = querystring.parse(data);
}
console.log(data);
// ابحث عن البيانات بناءً على نوع الواجهة.
دع القائمة = {}؛
التبديل (النوع) {
حالة "getProvince":
list.province = Object.keys(allCityInfo);
استراحة؛
حالة "getCity":
list.city = Object.keys(allCityInfo[data.province]);
استراحة؛
حالة "getCounty":
list.county = allCityInfo[data.province][data.city];
استراحة؛
}
console.log(list);
res.write(JSON.stringify(list));
الدقة. النهاية ()
}
وظيفة المستمعDoneHandler(){
console.log("بدأت الخدمة بنجاح");
} {
"بكين": {
"بكين": ["منطقة دونغتشنغ"، "منطقة شيتشنغ"، "منطقة تشونغوين"، "منطقة شيوان وو"، "منطقة تشاويانغ"، "منطقة فنغتاي"، "منطقة شيجينغشان"، "منطقة هايديان"، "منطقة مينتوجو"، "منطقة فانغشان"، "منطقة تونغتشو"، "منطقة شونيي"، "منطقة تشانغبينغ"، "منطقة داشينغ"، "منطقة بينغو"، "منطقة هوايرو"، "مقاطعة مييون"، "مقاطعة يانتشينغ"، "أخرى"]
}
"تيانجين"
: {
"تيانجين": ["منطقة خه بينغ"، "منطقة هيدونغ"، "منطقة هيشي"، "منطقة نانكاي"، "منطقة خبي"، "منطقة هونغجياو"، "منطقة بينهاي الجديدة"، "منطقة دونغلي"، "منطقة شيتشينغ" منطقة"، "منطقة جينان"، "منطقة بيتشن"، "منطقة نينغه"، "منطقة ووتشينغ"، "مقاطعة جينغهاي"، "منطقة باودي"، "جيشيان"، "منطقة تانجو"، "منطقة هانجو"، "منطقة داغانغ" "، "Baodi District"، "Others"]
},
}
ما ورد أعلاه هو شرح تفصيلي لقائمة الارتباط ثلاثية المستويات باستخدام JS (مع شرح الأفكار). لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة في PHP موقع صيني!
