แรงจูงใจ:
ตอนนี้เรามาทำตัวอย่างเล็ก ๆ ของการใช้ XML ใน IE: การแก้ปัญหาการเชื่อมโยงของเมนูแบบเลื่อนลงสองครั้ง บางทีตัวอย่างที่พบบ่อยที่สุดคือการเลือกจังหวัดแล้วเปลี่ยนตัวเลือกเมือง ดังนั้นเรามาลองใช้ XML เพื่อทำให้สมบูรณ์กันดีกว่า
ฟังก์ชั่นบางอย่างที่ฉันแนะนำก่อนหน้านี้ถูกนำไปใช้โดยตรงโดยใช้ไฟล์ XML+XSL คุณอาจไม่คุ้นเคยกับการใช้งานมากนัก ดังนั้นคราวนี้ฉันจะใช้ HMTL+XML โดยหวังว่าจะทำให้ทุกคนเข้าใจได้ชัดเจนยิ่งขึ้น--" XML สามารถทำได้ เรียบง่าย!" :)
วัสดุ:
มี 2 ไฟล์ที่เชื่อมโยงกับเมนูการเลือกวอลุ่ม XML: Citys.xml และ CitySelect.htm
ฟังก์ชันคือ:
หลังจากเลือกจังหวัดแล้ว เมืองที่เกี่ยวข้องสามารถแสดงได้โดยอัตโนมัติ ซึ่งสะดวกสำหรับผู้ใช้ ปรับปรุงการโต้ตอบข้อมูลอย่างมีประสิทธิภาพ และทำให้เพจของคุณมีสีสันมากขึ้น
ผล:
เรียกดูที่นี่
รหัส:
เมือง.xml
<?xml version="1.0" encoding="gb2312"?>
<จีน>
<State id="1" name="เจียงซี">
<เมือง>จิ่วเจียง</เมือง>
<เมือง>หนานชาง</เมือง>
<เมือง>หลูซาน</เมือง>
<เมือง>จิงเต๋อเจิ้น</เมือง>
</สถานะ>
<รหัสรัฐ = "2" ชื่อ = "ปักกิ่ง">
<เมือง>ปักกิ่งตะวันตก</เมือง>
<เมือง>จูหยงกวน</เมือง>
<เมือง>สวนซิงหัว</เมือง>
<เมือง>โจวโข่วเตียน</เมือง>
</สถานะ>
<State id="3" name="ฝูเจี้ยน">
<เมือง>ฝูโจว</เมือง>
<เมือง>เซียะเหมิน</เมือง>
<เมือง>จางโจว</เมือง>
</สถานะ>
<สถานะ id="4" name="กานซู">
<เมือง>หลานโจว</เมือง>
<ซิตี้>โลเมน</ซิตี้>
<เมือง>เจียหยูกวน</เมือง>
</สถานะ>
<สถานะ id="5" ชื่อ="กวางตุ้ง">
<เมือง>กวางโจว</เมือง>
<เมือง>เซินเจิ้น</เมือง>
<เมือง>ตงกวน</เมือง>
<เมือง>สือปาย</เมือง>
</สถานะ>
<State id="6" name="อานฮุย">
<เมือง>เหอเฟย์</เมือง>
<เมือง>หวงซาน</เมือง>
<เมือง>เกาลูนฮิลล์</ซิตี้>
<เมือง>หม่าอันชาน</เมือง>
</สถานะ>
</จีน>
CitySelect.htm
: ChooseState
(อ่านชื่อจังหวัดในข้อมูล XML และเพิ่มลงในรายการแบบเลื่อนลงของ SelState)
ฟังก์ชั่นเลือกสถานะ()
-
แหล่งที่มา var;
var sourceName = "เมือง.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //สร้างอินสแตนซ์ตัวแยกวิเคราะห์ MSXML
แหล่งที่มา async = เท็จ;
source.load(sourceName); //โหลดเอกสาร XML
root = source.documentElement; // ตั้งค่าองค์ประกอบเอกสารเป็นองค์ประกอบโหนดรูท
sortField=root.selectNodes(" //@name "); //ค้นหาโหนดทั้งหมดที่มีแอตทริบิวต์ที่มีชื่อ
for(var i=0;i<sortField.length;++i) //เพิ่มชื่อจังหวัดในรายการแบบเลื่อนลง
-
var oOption = document.createElement('ตัวเลือก');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].ข้อความ;
form1.SelState.options.add(oOption);
-
เลือกเมือง();
}
ฟังก์ชันแบบกำหนดเอง: เลือกเมือง
(อ่านชื่อเมืองที่เกี่ยวข้องในข้อมูล XML ตามชื่อจังหวัดที่เลือกในปัจจุบัน และเพิ่มลงในรายการแบบเลื่อนลง SelCity)
ฟังก์ชั่นเลือกเมือง()
-
x=form1.SelState.selectedIndex; //อ่านตัวเลือกปัจจุบันของช่องแบบเลื่อนลงจังหวัด
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); // ค้นหาโหนดเมืองทั้งหมดภายใต้โหนด State ซึ่งมีค่าแอตทริบิวต์ชื่อเท่ากับพารามิเตอร์ y
for(var i=form1.SelCity.options.length-1;i>=0;--i) // เลิกทำรายการเดิม
-
form1.SelCity.options.remove(i)
-
for(var i=0;i<sortField.length;++i) //เพิ่มชื่อเมืองในรายการแบบเลื่อนลง
-
var oOption = document.createElement('ตัวเลือก');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].ข้อความ;
form1.SelCity.options.add(oตัวเลือก);
-
-
ซอร์สโค้ดแบบฟอร์ม
<BODY onLoad="ChooseState()">
<ฟอร์มการกระทำ = "" method = "โพสต์" id = "form1" name = "form1">
<เลือกชื่อ = "SelState" id = "SelState" onchange = "ChooseCity()" >
</เลือก>
<เลือกชื่อ = "SelCity" id = "SelCity" >
</เลือก>
</รูปแบบ>
</BODY>
คำบรรยาย:
เมื่อฉันเริ่มเรียนรู้ XML ครั้งแรก ฉันก็สับสนเหมือนคนอื่นๆ - "ฉันเรียน XML แล้ว แต่ฉันควรใช้มันอย่างไร" คำถามนี้ขัดขวางฉันมาเป็นเวลานาน นานมาแล้ว...
เพราะอีคอมเมิร์ซ และการพัฒนาซอฟต์แวร์เป็นความเชี่ยวชาญของฉัน ฉันคิดว่าควรเริ่มจากสิ่งที่ฉันคุ้นเคยมากที่สุดจะดีกว่า ดังนั้นฉันจึงใช้ฟังก์ชันที่ใช้บ่อยที่สุดในการสร้างเว็บไซต์ในรูปแบบ XML คุณก็ทำได้เช่นกัน!