Во время процесса веб -разработки при выборе провинций и городов взаимосвязь между провинциями и городами представляет собой небольшой вторичный случай сцепления, в котором используются HTML, CSS, PHP, JS и
Аджакс асинхронная просьба
Во -первых, создайте файлы City.php и Province.php и connet.html и напишите общую структуру вторичной связи. HTML -код выглядит следующим образом:
<babel> Провинция: </label> <select id = "Провинция"> <partice> Пожалуйста, выберите </option> </select> <babel> City: </label> <select id = "city"> <partice> Пожалуйста, выберите </option> </selet>
Код JS и запрос AJAX следующие:
<script> // Получить данные с сервера через Ajax var provinceeelement = document.getElementbyid ("province"); window.onload = function () {// Создать основной объект var xhr = getxhr (); // прослушивание xhr.onstatechange = function () {if (xhr.ready == 4 &&& xhr.statechange = function) Провинция, провинция Liaoning, провинция Shandong VAR DATA = XHR.RESPONSETEXT; // DACA DATA VAR ARR = DATA.SPLIT (','); for (var i = 0; i <arr.length; i ++) {// <опция> выберите </option> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); Opt.AppendChild (текст); provinceelement.appendchild (opt);}}} // Создать соединение xhr.open ("get", "province.php"); // Отправить данные xhr.send (null);} // 2. Пользователь выбирает другое провинция Provinceeelement.onchange = function () {// a. Очистить список города 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 ("content-type", "Application/x-Www-form-urlencoded"); xhr.send ("province ="+provincevalue); xhr.onshreade = xhreleach = xhreadeech = xhrleadeech = ("province ="+provincevalue); == 4 && xhr.status == 200) {var data = xhr.responsetext; var arr = data.split (","); for (var i = 0; i <arr.length; i ++) {// <option> city </option> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); Opt.AppendChild (текст); cityelement.appendchild (opt);}}}} функция getxhr () {var xhr = null; if (window.xmlhttprequest) {xhr = new xmlhttprequest ();} else {xhr = new activexobject ("microsoft.xml xhr;} </script> province.php Код выглядит следующим образом: <? Php // Ответить на информацию о провинции провинция провинция, провинция Ляонинг, провинция Шаньдун ';?>Код City.php выглядит следующим образом:
<? Php // 1. Получить данные запроса клиента $ province = $ _post ['' провинция ']; // 2. Предоставьте разные города ($ province) {case' jilin province ': echo' chanchun City, город Сонгюан, город Байшан, город, город, городский город; Город, город Джинчжоу, Город Тилинга, город Дандонг '; перерыв; Дело «провинция Шандун»: Эхо «Город Цзинан, город Циндао, город Вейхай, город Рижао, город Дежу»; перерыв;}Окончательная интерфейсная диаграмма заключается в следующем:
Вышеуказанное представляет собой небольшой случай провинциальной и муниципальной связи на втором уровне, представленном редактором. Я надеюсь, что это будет полезно для вас. Если вы хотите узнать больше, обратите внимание на wulin.com!