motivasi:
Sekarang mari kita lakukan contoh kecil penerapan XML di IE: memecahkan masalah keterkaitan menu drop-down ganda. Mungkin contoh yang paling umum adalah memilih provinsi dan kemudian mengubah pilihan kota, jadi mari kita coba menggunakan XML untuk menyelesaikannya.
Beberapa fungsi yang saya perkenalkan sebelumnya diimplementasikan secara langsung menggunakan file XML+XSL. Anda mungkin belum terlalu paham dengan penggunaannya, jadi kali ini saya akan menggunakan HMTL+XML, berharap dapat memberikan pemahaman yang lebih jelas kepada semua orang--" XML bisa jadi begitu sederhana!" :)
Bahan:
Ada 2 file yang ditautkan ke menu pemilihan volume XML: Citys.xml dan CitySelect.htm
.
Setelah memilih provinsi, kota terkait dapat ditampilkan secara otomatis, yang memudahkan pengguna, secara efektif meningkatkan interaksi data, dan membuat halaman Anda lebih berwarna.
Memengaruhi:
Telusuri di sini
Kode:
kota.xml
<?xml versi="1.0" pengkodean="gb2312"?>
<Tiongkok>
<ID negara bagian = "1" nama = "Jiangxi">
<Kota>Jiujiang</Kota>
<Kota>Nanchang</Kota>
<Kota>Lushan</Kota>
<Kota>Jingdezhen</Kota>
</Negara Bagian>
<ID negara bagian = "2" nama = "Beijing">
<Kota>Beijing Barat</Kota>
<Kota>Juyongguan</Kota>
<Kota>Taman Tsinghua</Kota>
<Kota>Zhoukoudian</Kota>
</Negara Bagian>
<ID negara bagian = "3" nama = "Fujian">
<Kota>Fuzhou</Kota>
<Kota>Xiamen</Kota>
<Kota>Zhangzhou</Kota>
</Negara Bagian>
<ID negara bagian = "4" nama = "Gansu">
<Kota>Lanzhou</Kota>
<Kota>Lomen</Kota>
<Kota>Jiayuguan</Kota>
</Negara Bagian>
<ID negara bagian = "5" nama = "Guangdong">
<Kota>Guangzhou</Kota>
<Kota>Shenzhen</Kota>
<Kota>Dongguan</Kota>
<Kota>Shipai</Kota>
</Negara Bagian>
<ID negara bagian = "6" nama = "Anhui">
<Kota>Hefei</Kota>
<Kota>Huangshan</Kota>
<Kota>Bukit Kowloon</Kota>
<Kota>Ma'anshan</Kota>
</Negara Bagian>
</China>
Fungsi khusus
CitySelect.htm
: ChooseState
(Baca nama provinsi di data XML dan tambahkan ke daftar drop-down SelState)
fungsiPilihStatus()
{
sumber var;
var sourceName = "Kota.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Buat instance parser MSXML
sumber.async = false;
source.load(sourceName); //Muat dokumen XML
root = source.documentElement; //Tetapkan elemen dokumen sebagai elemen simpul akar
sortField=root.selectNodes(" //@name "); //Mencari semua node yang atributnya mengandung nama
for(var i=0;i<sortField.length;++i) //Tambahkan nama provinsi ke daftar drop-down
{
var oOption = dokumen.createElement('OPTION');
oOption.teks = " "+sortField[i].teks+" ";
oOption.value = sortField[i].teks;
form1.SelState.options.add(oOption);
}
PilihKota();
}
Fungsi khusus: Pilih Kota
(Baca nama kota terkait dalam data XML berdasarkan nama provinsi yang dipilih saat ini, dan tambahkan ke daftar drop-down SelCity)
fungsiPilihKota()
{
x=form1.SelState.selectedIndex; //Baca opsi saat ini pada kotak drop-down provinsi
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Mencari semua node kota di bawah node Negara yang nilai atribut namanya sama dengan parameter y
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Membatalkan item daftar asli
{
form1.SelCity.options.hapus(i)
}
for(var i=0;i<sortField.length;++i) //Tambahkan nama kota ke daftar drop-down
{
var oOption = dokumen.createElement('OPTION');
oOption.teks = " "+sortField[i].teks+" ";
oOption.value = sortField[i].teks;
form1.SelCity.options.add(oOption);
}
}
Kode sumber formulir
<BODY onLoad="ChooseState()">
<FORMASI tindakan="" metode="posting" id="form1" nama="form1">
<PILIH nama="SelState" id="SelState" onchange="ChooseCity()" >
</PILIH>
<PILIH nama="SelCity" id="SelCity" >
</PILIH>
</BENTUK>
</BODY>
Catatan tambahan:
Ketika saya pertama kali mulai belajar XML, saya memiliki kebingungan yang sama seperti orang lain - "Saya telah belajar XML, tapi bagaimana saya harus menggunakannya?" Pertanyaan ini telah menghambat saya sejak lama...
Karena e-commerce dan pengembangan perangkat lunak adalah keahlian saya, saya pikir akan lebih baik untuk memulai dengan apa yang paling saya pahami. Jadi saya menerapkan beberapa fungsi yang paling umum digunakan dalam pembuatan situs web dalam XML. Anda juga bisa melakukannya!