jQuery и Ajax


Задача: При изменении одного селекта списка (select), менять другой, используя jQuery и Ajax.


Для решения нам понадобится два файла:

index.html – основной код клиентской части.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery AJAX</title>

<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sel1").change(function(){
$('select[@name=sel2] option').remove();
$.ajax({
type: "GET",
url: "request.php",
data: "zapros=" + $("#sel1").val() + "",
success: function (data, textStatus)
{
$("#sel2").append( $(data) );
}
});
});
});
</script>

</head>

<body>

<select name="sel1" id="sel1">
<option value="-" > - </option>
<option value="one" > Один </option>
<option value="two" > Два </option>
<option value="three" > Три </option>
</select>

<select name="sel2" id="sel2">
<option value="-" > - </option>
</select>

</body>

</html>

request.php – формирует ответ клиенту.

<?php
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if(isset($_GET[zapros]))
{
echo '<option value="'.$_GET[zapros].'">';
echo "Выбрано: ".$_GET[zapros];
echo "</option>";
}
?>

Рассмотрим index.html.

Подключаем библиотеку jQuery, строка 07.

При изменении селекта выполняется скрипт с 10 по 21 строку, где сначала очищаем все значения в первом селекте с именем sel2, строка 11. Затем отправляем Ajax запрос к request.php, при этом передаем ему параметр ?zapros= выбранное значение в селекте, строка 15. После удачного запроса добавляем полученный ответ во второй селект, строка 18.  Все!

Рассмотрим request.php.

Здесь еще проще! Если появился GET запрос «zapros» , то вернуть то, что нас интересует, например, данные с базы.

Смотрим пример!

, ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 9, в среднем: 5.00 из 5)
Loading ... Loading ...


  1. Нет комментариев, пока!.
(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.