Эй, я пытаюсь сделать адресную книгу для своего сайта, и я думал о том, что у меня две панели. На левой стороне есть контактные имена, а справа – контактные данные.
Я могу загрузить панель «Контакты», используя цикл while, чтобы циклически выполнять мой запрос, но тогда я думал, что у меня действительно не было идеи о том, как загружать детали этого контакта, когда пользователь нажимает на определенное имя контакта.
Как я смогу подойти к этой проблеме?
Если у вас есть что-то вроде:
<div id="contactNamesPane"> <ul> <li><a href="#" class="names" id="johnDoe">Doe, John</a></li> </ul> </div> <div id="contactDetailsPane"> </div> $('contactNamesPane a.names').click( var thisContactId = $(this).attr('id'); $('contactDetailsPane') .load('http://path/to/script.php?contactId=' + thisContactId + ' #' + thisContactId); ); У этого есть предположения, что у вас есть php-скрипт для создания контактной информации (находится по адресу http://path/to/script.php и этот скрипт может принимать переменную GET , чтобы показать конкретного человека.
Он также предполагает, что эти данные будут помещены внутри элемента id, равного имени контакта.
Смутно последовательная демонстрация размещена на моем сервере по адресу: http://davidrhysthomas.co.uk/so/loadDemo.html
Когда вы создаете список слева, добавьте идентификатор контакта в rel
<ul id="contacts"> <li><a href="#" rel="ID_OF_CONTACT">Name Here</a></li> ... </ul>
Затем с помощью jquery вы можете использовать атрибут rel и преобразовать запрос ajax на страницу php, которая возвращает информацию контакта с этим идентификатором
$("#contact a").click(function() { var id = $(this).attr("rel"); $.get("url_of_php_page", { id: id }, function(data){ // do something with the data } ); });
вместо этого используйте jquery.data