Selama proses pengembangan web, saat memilih provinsi dan kota, hubungan antara provinsi dan kota adalah kasus hubungan sekunder kecil, yang menggunakan HTML, CSS, PHP, JS dan
Permintaan asinkron Ajax
Pertama, buat file City.php dan province.php dan connet.html, dan tuliskan struktur umum dari tautan sekunder. Kode HTML adalah sebagai berikut:
<label> provinsi: </label> <pilih id = "province"> <pection> silakan pilih </pect> </tect> <label> City: </label> <pilih id = "city"> <pection> silakan pilih </option> </pilih>
Kode JS dan permintaan AJAX adalah sebagai berikut:
<script> // Dapatkan data dari server melalui AJAX var provinceElement = document.geteLementById ("provinsi"); window.onload = function () {// Buat objek inti var xhr = getxhr (); // dengarkan xhr.onreadystatechange = function () {if (xhr.ReadyState == 4 & Function () {if (xhr.ReadyState == 4 &= & Function () {if (xhr. Provinsi Liaoning, Provinsi Shandong var data = xhr.Responsetext; // Proses data var arr = data.split (','); untuk (var i = 0; i <arr.length; i ++) {// <pection> Silakan pilih </pect> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); opt.appendchild (teks); ProvinceElement.AppendChild (opt);}}} // Buat koneksi xhr.open ("get", "province.php"); // Kirim data xhr.send (null);} // 2. Pengguna memilih provinsi provinsi yang berbeda.onChange = function () {// a. Hapus Daftar Kota Var CityElement = Document.GetElementById ("City"); var opts = CityElement.getElementsByTagname ("opsi"); untuk (var i = 1; i <opts.length; i ++) {cityeLement.removechild (opts [i]); i-;} // b. Dapatkan nilai yang dipilih oleh pengguna (provinsi) var provinceValue = this.value; if (provinceValue == "silakan pilih") {return false;} // c. Dapatkan kota var xhr = getxhr (); xhr.open ("post", "city.php"); xhr.setRequestheader ("tipe konten", "aplikasi/x-www-form-urlencoded"); xhr.send ("province ="+provincevalue); xhr.onreading ("province ="+provincevalue); xhr.onreading ("province ="+provincevalue); xhr.onreading ("province ="+provinceValue); xhr.onreadyon ("province ="+provinceValue); xHr.Onon 4 && xhr.status == 200) {var data = xhr.Responsetext; var arr = data.split (","); untuk (var i = 0; i <arr.length; i ++) {// <pection> city </pection> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); opt.appendchild (teks); CityElement.AppendChild (opt);}}}} function getXhr () {var xhr = null; if (window.xmlHttprequest) {xhr = new xmlHtpRequest ();} else {xhr = new activexObject ("microsoft.xmlspinpon (" new a activexObject ("microsoft.xmlpipt (" microsoft.xml "{xhr = new activexObject (" microsoft.xml Kode adalah sebagai berikut: <? PHP // Menanggapi Informasi Provinsi Echo 'Provinsi Jilin, Provinsi Liaoning, Provinsi Shandong' ;?>Kode City.php adalah sebagai berikut:
<?php// 1. Receive client request data $province = $_POST['province'];// 2. Provide different cities switch ($province){case 'Jilin Province':echo 'Changchun City, Songyuan City, Baishan City, Tonghua City, Liaoyuan City';break;case 'Liaoning Province':echo 'Shenyang City, Dalian City, Jinzhou City, Tieling City, Dandong City '; Break; Case' Shandong Province ': Echo' Jinan City, Qingdao City, Weihai City, Rizhao City, Dezhou City '; Break;}Diagram antarmuka terakhir adalah sebagai berikut:
Di atas adalah kasus kecil hubungan provinsi dan kota di tingkat kedua yang diperkenalkan oleh editor. Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan wulin.com!