شرح الحالات الصغيرة للربط الإقليمي والبلدي في المستوى الثاني

أثناء عملية تطوير الويب ، عند اختيار المقاطعات والمدن ، فإن العلاقة بين المقاطعات والمدن هي حالة ربط ثانوية صغيرة ، تستخدم HTML و CSS و PHP و JS و

طلب أياكس غير المتزامن

أولاً ، قم بإنشاء ملفات city.php و province.php و connet.html ، واكتب الهيكل العام للربط الثانوي. رمز HTML كما يلي:

 <label> المقاطعة: </label> <تحديد ID = "PROCENT"> <borting> الرجاء تحديد </OPTION> </select> <balle> المدينة: </label> <تحديد ID = "CITY"

رمز JS وطلب AJAX على النحو التالي:

 <script> // احصل على بيانات من الخادم من خلال Ajax var provincelement = document.getElementById ("PROCENTINCE") ؛ Window.onload = function () {// إنشاء كائن أساسي var xhr = getxhr () ؛ // الاستماع xhr.onreadechange = function () Liaoning Province ، Shandong Province var data = xhr.responsetext ؛ // Process Data var arr = data.split ('،') ؛ لـ (var i = 0 ؛ i <arr.length ؛ i ++) {// <potion> الرجاء تحديد </option> var opt = document.createElement ("Option") ؛ var text = document.createTextNode (arr [i]) ؛ opt.appendchild (text) ؛ PROCENTELEMENT.APPENDCHILD (OPT) ؛}}} // قم بإنشاء اتصال XHR.Open ("GET" ، "Province.php") ؛ // إرسال بيانات XHR.Send (null) ؛} // 2. يختار المستخدم مقاطعة مختلفة. قم بمسح قائمة المدينة var cityElement = document.getElementById ("City") ؛ var opts = cityElement.getElementsByTagName ("Option") ؛ for (var i = 1 ؛ i <opts.length ؛ i ++) {cityElement.removechild (opts [i]) ؛ i-؛} // b. الحصول على القيمة المحددة من قبل المستخدم (المقاطعة) var provincevalue = this.value ؛ if (provinceValue == "الرجاء تحديد") {return false ؛} // c. احصل على المدينة var xhr = getxhr () ؛ xhr.open ("post" ، "city.php") ؛ xhr.setRequestHeader ("type-type" ، "application/x-www-form-urlencoded") ؛ xhr.send ( == 4 && xhr.status == 200) {var data = xhr.responsetext ؛ var arr = data.split ("،") ؛ لـ (var i = 0 ؛ i <arr.length ؛ i ++) {// <potion> city </portion> var opt = document.createElement ("Option") ؛ var text = document.createTextNode (arr [i]) ؛ opt.appendchild (text) ؛ CityElement.AppendChild (OPT) ؛}}}} وظيفة getxhr () {var xhr = null ؛ if (window.xmlHttprequest) {xhr = new xmlhttprequest () ؛} ell XHR ؛} </script> رمز PRONCTINCE.PHP كما يلي: <؟

رمز city.php كما يلي:

 [؟ سيتي ، مدينة تيلينج ، مدينة داندونغ ؛

مخطط الواجهة النهائية هو كما يلي:

ما سبق هو حالة صغيرة من الرابط الإقليمي والبلدي في المستوى الثاني الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كنت تريد معرفة المزيد ، فيرجى الانتباه إلى wulin.com!