На этом шаге мы рассмотрим использование отдельных ссылок при выполнении запроса GET.
Так как наша цель состоит в том, чтобы показать, как передавать данные на сервер, мы будем использовать другой способ запроса, отличный от предыдущего, который был основан на использовании отдельных ссылок. Вместо этого мы создадим список ссылок, по одной для каждого термина, а щелчок на любой из них будет вызывать загрузку соответствующего определения. Разметка HTML, которую мы добавили для этой цели, приводится ниже:
<div class="letter" id="letter-e">
<h3>E</h3>
<ul>
<li><a href="e.php?term=EAGLES">EAGLES</a></li>
<li><a href="e.php?term='EARTH AND FIRE'">EARTH AND FIRE</a></li>
<li><a href="e.php?term=EKSEPTION">EKSEPTION</a></li>
<li><a href="e.php?term=ELECTRA">ELECTRA</a></li>
<li><a href="e.php?term=ELF">ELF</a></li>
<li><a href="e.php?term=ELIS">ELIS</a></li>
<li><a href="e.php?term=ELP">ELP</a></li>
<li><a href="e.php?term=ENCHANT">ENCHANT</a></li>
<li><a href="e.php?term=EPICA">EPICA</a></li>
<li><a href="e.php?term=EVANESCENCE">EVANESCENCE</a></li>
<li><a href="e.php?term=EVEREVE">EVEREVE</a></li>
</ul>
</div>
Теперь необходимо написать программный код JavaScript, который будет вызывать сценарий РНР с корректными параметрами. Для извлечения данных мы могли бы использовать обычный механизм .load(), добавив строку запроса прямо в адрес URL, например е.php?term=EVANESCENCE. Однако вместо этого мы можем создавать строку запроса средствами библиотеки jQuery, опираясь на отображение с данными, которое будет передаваться функции $.get():
$(document).ready(function() {
$('#letter-e a').click(function() {
$.get('e.php', {'term': $(this).text()}, function(data) {
$('#dictionary').html(data);
});
return false;
});
});
Теперь, когда мы уже видели другие функции поддержки AJAX, предоставляемые библиотекой jQuery, обращение к этой функции выглядит знакомым. Единственное отличие заключается во втором аргументе, который позволяет нам передавать функции отображения ключей и значений для включения их в строку запроса. В данном случае ключом всегда будет слово term, а значением - текст ссылки. Теперь щелчок на первой ссылке в списке заставит появиться соответствующее ей определение, как показано на рисунке 1.
Рис.1. Вид страницы после загрузки фрагмента HTML, соответствующего указанному термину
Полный текст этого примера можно взять здесь.Для каждой ссылки в этом списке определен прямой адрес доступа к соответствующему определению, хотя мы и не используем эти адреса в программном коде. Таким способом обеспечивается альтернативный способ навигации по информации для тех, у кого поддержка JavaScript в браузере отключена или недоступна (разновидность приема прогрессивного улучшения). Чтобы предотвратить возможность перехода по ссылкам в результате щелчка, как это предусмотрено по умолчанию, обработчик события возвращает значение false.
На следующем шаге мы рассмотрим выполнение запроса POST.
