<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Динамическая подгрузка данных для select

Динамическая подгрузка данных для select

На некоторых сайтах при заполнении формы происходит динамическая подгрузка данных для select. Например, после того, как Вы укажете страну, автоматически будут подгружены в следующий select города, принадлежащие этой стране. И недавно меня попросили написать о том, как это делается.

Начнём с формы и JavaScript-кода:

<script type="text/javascript">
  function getXmlHttp() {
    var xmlhttp;
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  }
  function changeCountry(id) {
    var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
    xmlhttp.open('POST', 'cities.php', true); // Открываем асинхронное соединение
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку
    xmlhttp.send("id=" + encodeURIComponent(id)); // Отправляем POST-запрос
    xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
      if (xmlhttp.readyState == 4) { // Ответ пришёл
        if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
          var cities = JSON.parse(xmlhttp.responseText); // Преобразуем JSON-строку в массив
          var text = "<option value=''>Выберите город</option>"; // Начинаем создавать элементы в select
          for (var i in cities) {
            /* Перебираем все элемены и создаём набор options */
            text += "<option value='" + i + "'>" + cities[i] + "</option>";
          }
          document.myform.cities.innerHTML = text; // Устанавливаем options в select
        }
      }
    };
  }
</script>
<form name="myform" action="#" method="post">
  <div>
    <select name="countries" onchange="changeCountry(this.value)">
      <option value="">Выберите страну</option>
      <option value="0">Россия</option>
      <option value="1">Украина</option>
    </select>
  </div>
  <br />
  <div>
    <select name="cities">
      <option value="">Выберите город</option>
    </select>
  </div>
</form>

При изменении значения в select со странами делается запрос на сервер, отправляя при этом id выбранной страны. Сервер возвращает список городов, соответсвующих id выбранной страны. Теперь и сама серверная часть:

<?php
  if ($_POST["id"] == "0") echo json_encode(array("0" => "Москва", "1" => "Санкт-Петербург"));
  elseif ($_POST["id"] == "1") echo json_encode(array("2" => "Киев", "3" => "Одесса"));
?>

Здесь я думаю всё очень прозрачно. Безусловно, данные могут подгружаться из базы данных. Главное, полученные массивы преобразовать в JSON-строку, которую и отправить уже клиентской части.

Вот так делается динамическая подгрузка данных для select с использованием JavaScript, технологии Ajax и PHP.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (15):

malina95 malina95 08.07.2013 15:35:55

Спасибо, хорошая статья, побольше бы таких по js, js это полезно

Ответить

programmist programmist 08.07.2013 17:39:10

Побольше бы вообще нормальных статей

Ответить

D_Sari D_Sari 09.07.2013 13:27:01

Заранее извините, если вопрос глупый. Я начинающий в этом деле. В данном коде, если я правильно понимаю,в form action="#" вместо # вставляем адрес php страницы, куда мы копируем php код. Нужно ли еще что-то менять или создать еще какие-то страницы..я запуталась) помогите пожалуйста,проблема в том, что при выборе страны, города не выводятся.

Ответить

Admin Admin 09.07.2013 16:16:53

Работоспособность от того, что стоит в action не зависит. Проверьте, что у Вас есть Denwer, и он запущен, и вот ещё почитайте http://myrusakov.ru/php-start.html

Ответить

D_Sari D_Sari 09.07.2013 16:24:53

Михаил, спасибо за ответ, а данный код работает только с Денвером? у меня easyphp, я через него открываю страницу с кодом. Я скопировала вами приведенный код javascript с кодом формы и сразу после него скопировала серверную часть php. Все в body, запускаю через easyphp (с ним проблем нет), но php код появляется на странице просто в виде кода, т.е. не обрабатывается. Подскажите пожалуйста, в чем моя ошибка

Ответить

Admin Admin 09.07.2013 21:19:28

http://myrusakov.ru/php-start.html - вот это почитайте.

Ответить

Sam888 Sam888 17.07.2013 02:06:10

Михаил а похожа ли эта система которою Вы представили в статье на автаматическую систему зависемых списков на сайте http://www.mamba.ru/???

Ответить

Admin Admin 17.07.2013 11:09:22

Да.

Ответить

alexey-m alexey-m 25.07.2013 16:45:11

Если использовать библиотеку jQuery - код получится в 2 раза меньше, для этого ведь есть метод $.ajax(). И не нужно будет делать трай и кэтчи чтобы определить что подходит браузеру. Код конечно выглядит грандиозно :) Я так на русских курсах по JS учился, пока не стал использовать jQuery - жизнь стала проще :) http://api.jquery.com/jQuery.ajax/

Ответить

Alena005 Alena005 28.08.2013 14:03:34

Ув. Михаил. Подскажите, пожалуйста. Скопировала указанный код в файл test.php. Php код скопировала в файл cities.php. При запуске http://localhost/test.php/ города не отобразились. Но если поменять строку xmlhttp.open('POST', '/cities.php/', true); (cities.php - поставить между слешами) то вместо городов отдается null.

Ответить

theinizio theinizio 06.12.2013 12:46:35

Надо сохранять файл cities.php в кодировке UTF-8. Либо писать названия городов латиницей.

Ответить

protected.for protected.for 01.09.2013 23:55:42

Здравствуйте, могу ли я немного обсудить с вами одну строчку кода который предоставлен выше, в целях саморазвития и углубления знаний. В общем к этой строчке: (xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку), по моему мнению, не совсем правильно указан комментарий. Может я и не прав, но я буду очень признателен если вы меня грамотно поправите. Я считаю, что здесь отправляется не кодировка, а, на сколько мне известно, симулируется отправка формы, но на самом деле форма не отправляется. Не могли бы вы меня вразумить и помочь разобраться? :)

Ответить

Admin Admin 02.09.2013 22:17:10

Это просто отправка заголовка, тогда уж, и больше ничего.

Ответить

lethalblo lethalblo 10.01.2016 20:16:36

Вас не затруднит создать небольшой урок, на схожую тему, только, чтоб при выборе одного из пунктов выпадающего списка, он был активным даже после обновления страницы. Вот пример toramp.com/schedule.php

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.