Связанные списки с использованием Ajax и MySQL

Рано или поздно каждому разработчику веб-приложений придется столкнуться с использованием связанных списков на сайте. Эта статья рассказывает о том, как с помощью технологии AJAX сделать связанные списки с БД MySQL удобными для пользователя. Связанные списки это два или более списка. Выбор значения в одном из них влияет на содержание остальных.

Такие списки очень удобны, если вам надо выбрать некий объект с определенными характеристиками. Благо на текущий момент существует множество готовых решений, от самых простых, до более сложных, работающих с использованием БД MySQL. На примере одного готового решения мы разработаем связанные списки «Страна — Регион — Город» для нашего сайта. Данные мы будем выбирать из базы данных.

Отрисуем форму для наглядности:

<form action="#" method="get">
			Страна:<br />
			<select name="country_id" id="country_id" class="StyleSelectBox">
				<option value="0">- выберите страну -</option>
				<option value="3159">Россия</option>
				<option value="9908">Украина</option>
				<option value="248">Беларусь</option>
			</select></td><td>
			Регион:<br />
			<select name="region_id" id="region_id" disabled="disabled" class="StyleSelectBox">
				<option value="0">- выберите регион -</option>
			</select></td><td>
			Город:<br />
			<select name="city_id" id="city_id" disabled="disabled" class="StyleSelectBox">
				<option value="0">- выберите город -</option>
			</select>
		</form>

Что нам необходимо?
При выборе страны, послать AJAX запрос на сервер, получить список регионов в стране и подставить во второй селект, после чего исходя из выбора второго селекта подгрузить данные в третий.

Что мы для этого сделаем?
Необходимо повесить обработчик события onchange на select с id=country_id, т.е. при выборе страны мы хотим вызвать свою функцию, которая будет подгружать список регионов а затем и список городов по id=region_id.

Наше так называемое веб-приложение будет состоять из двух частей: бэк-энд и фронт-энд (серверная часть и клиентская). Как многие уже догадались, за клиентскую часть отвечать будет javascript, а за серверную — php.

Здесь описана с подробными комментариями функция, которая будет вызываться при выборе страны и региона:

selects.js — файл функций для выбора селектов

/* 
 * При полной загрузке документа 
 * мы начинаем определять события 
 */
$(document).ready(function () {
/* 
 * На выборе селекта страны — вешаем событие, 
 * функция будет брать значение этого селекта 
 * и с помощью ajax запроса получать список 
 * регионов для вставки в следующий селект 
 */
	$('#country_id').change(function () {
/*
 * В переменную country_id положим значение селекта
 * (выбранная страна)
 */
		var country_id = $(this).val();
/*
 * Если значение селекта равно 0,
 * т.е. не выбрана страна, то мы
 * не будем ничего делать
 */
		if (country_id == '0') {
			$('#region_id').html('<option>- выберите регион -</option>');
			$('#region_id').attr('disabled', true);
			$('#city_id').html('<option>- выберите город -</option>');
			$('#city_id').attr('disabled', true);
			return(false);
/*
 * Очищаем второй селект с регионами
 * и блокируем его через атрибут disabled
 * туда мы будем класть результат запроса
 */
		}
		$('#region_id').attr('disabled', true);
		$('#region_id').html('<option>загрузка...</option>');
/*
 * url запроса регионов
 */
		var url = 'get_regions.php';
/*
 * GET'овый AJAX запрос
 * подробнее о синтаксисе читайте
 * на сайте http://docs.jquery.com/Ajax/jQuery.get
 * Данные будем кодировать с помощью JSON
 */
		$.get(
			url,
			"country_id=" + country_id,
			function (result) {
				if (result.type == 'error') {
					alert('error');
					return(false);
				}
				else {
/*
 * проходимся по пришедшему от бэк-энда массиву циклом
 */
					var options = ''; 

					$(result.regions).each(function() {
/*
 * и добавляем в селект по региону
 */
						options += '<option value="' + $(this).attr('region_id') + '">' + $(this).attr('name') + '</option>';
					});

					$('#region_id').html('<option value="0">- выберите регион -</option>'+options);
					$('#region_id').attr('disabled', false);
					$('#city_id').html('<option>- выберите город -</option>');
					$('#city_id').attr('disabled', true);  			
				}
			},
			"json"
		);
	});
/*
 * Те же действия проделываем с выбором города 
 */
$('#region_id').change(function () {
		var region_id = $('#region_id :selected').val();
		if (region_id == '0') {
			$('#city_id').html('<option>- выберите город -</option>');
			$('#city_id').attr('disabled', true);
			return(false);
		}
		$('#city_id').attr('disabled', true);
		$('#city_id').html('<option>загрузка...</option>');	
		var url = 'get_city.php';		
		$.get(
			url,
			"region_id=" + region_id,

			function (result) {
				if (result.type == 'error') {
					alert('error');
					return(false);
				}
				else {
					var options = ''; 
					$(result.citys).each(function() {
						options += '<option value="' + $(this).attr('city_id') + '">' + $(this).attr('name') + '</option>';
					});

					$('#city_id').html('<option>- выберите город -</option>'+options);
					$('#city_id').attr('disabled', false);
				}
			},
			"json"
		);
	});	
});

Как мы уже договорились, бэк-энд будет на php. Для начала нам нужно подключиться к базе данных MySQL: (саму базу можно взять тут)

connect.php — конфигурация:

$host='localhost';          //Хост
$db='select';               //Имя БД
$user_mysql='root';       //Имя пользователя БД
$pass_mysql='';          //Пароль пользователя БД
$link = mysql_connect($host, $user_mysql, $pass_mysql) or die("<center><h1>Don't connect with database!!!</h1></center>");
mysql_query ("set character_set_client='utf8'");
mysql_query ("set character_set_results='utf8'");
mysql_query ("set collation_connection='utf8_general_ci'");
mysql_select_db($db, $link)or die("<center><h1>ERROR CONNECT DATABASE!!!</h1></center>");

get_regions.php — файл выбора регионов:

include_once 'connect.php';
$country_id = @intval($_GET['country_id']);

$regs=mysql_query("SELECT name, region_id  FROM region WHERE country_id=$country_id");

if ($regs) {
    $num = mysql_num_rows($regs);      
    $i = 0;
    while ($i < $num) {
       $regions[$i] = mysql_fetch_assoc($regs);   
       $i++;
    }     
    $result = array('regions'=>$regions);  
}
else {
	$result = array('type'=>'error');
}
print json_encode($result);

get_city.php — файл выбора городов:

include_once 'connect.php';
$region_id = @intval($_GET['region_id']);

$regs=mysql_query("SELECT name FROM city WHERE region_id=$region_id"); 

if ($regs) {
    $num = mysql_num_rows($regs);      
    $i = 0;
    while ($i < $num) {
       $citys[$i] = mysql_fetch_assoc($regs);   
       $i++;
    }     
    $result = array('citys'=>$citys);  
}
else {
	$result = array('type'=>'error');
}

print json_encode($result);

 
Пароль на архив webersoft.ru


Комментарии: