как правильно построить скрипт на id с применением ajax и php
Здравсвуйте. Возник вопрос. Все знают социальную сеть вконтакте.ру
Мне нужно знать, как так же реализовать на id работу. Допустим есть фотогалерея. Человек заходит и видит перед собой две ссылки: <a id=album>Мои альбомы<a> | <a id=cat>Категории<a> нужно, чтобы без перезагрузки страницы пользовать мог попасть в альбомы ИЛИ в категории. Допустим у меня есть файл отвечающий за альбомы называется album.php и за категории cat.php Если посетитель нажимает на "Мои альбомы" (id=album), тогда должно подгрузиться файл album.php Загрузить должно следующее: сверху ссылка "Добавить альбом", снизу наименования уже созданных альбомов в виде: <a id="view_album1">Альбом 1</a> (<a id="add_photo_to1">добавить фото</a>) <a id="view_album2">Альбом 2</a> (<a id="add_photo_to1">добавить фото</a>) <a id="view_album3">Альбом 3</a>(<a id="add_photo_to1">добавить фото</a>) .......... При выборе одного из альбомов (view_album...) у меня все из того же файла album.php должен сработать php скрипт, который выводит фотографии находящиеся в выбранном альбоме в виде: <a id="add_photo_to1">Добавить фотографию в альбом 1</a> Фотография1 Фотография2 Фотография3 ................... Примерно тоже самое должно происходить при выборе не "Мои альбомы", а "Категории". Суть вопроса в следующем - как мне при выборе разных id передавать параметры одному и тому же скрипту php? Находил пример: <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <body> <form id="myForm"> Введите имя:<br/> <input id="username" type="text" size="20"><br/><br/> <a id="eee" href="javascript:void(0)">fffffff</a> </form> <div id="content"></div> <script> $(document).ready(function(){ $('#eee').click(function () { $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; }); }); </script> </body> </html> в принципе понятно как это работает, но как по разным id разобрать не понятно. Можно на каждый id насоздавать море функций, но это будет глупостью, должна быть какая-то универсальность, функция, которая срабатывает при нажатие на ссылку с определенным id, этот id должен передаться в функцию и функцию передает скрипту php параметры, в зависимости от которых я и буду выполнять в скрипте php те или иные действия. Нужно передать оидн, два или более параметров файлу, в виде: album.php?id_album=2 или album.php?id_album=2&action=add |
Как передавать разные параметры в зависимости от того,ч то нажимаю.
Например доступно три действия, просмотр, добавление и удаление, соответственно data: { album: 4, action: "view" } data: { album: 0, action: "add" } data: { album: 4, action: "edit" } как мне не создавая миллиард функций просто параметром передавать в data параметры и значения? |
$('#eee').click(function (e) { console.log(e.target); //элемент на который кликнули //следовательно e.target.id его id id плодить не обязательно, таким же образом можно получить href или class элемента и исходя из этого и плясать. клик можно повесить не на элемент ссылки, а на всё меню $('весь блок меню').click(function (e) { console.log(e.target); //элемент на который кликнули //следовательно e.target.id его id |
Gozar,
Можно подробнее и с примером? Не очень понятно. Возьмем элементарный пример: есть 3 ссылки <a>Ссылка 1</a> | <a>Ссылка 2</a> | <a>Ссылка 3</a> как мне обратиться к файлу php через ajax, в который передать то, какую ссылку кликнул посетитель. |
neon_tmn,
Я уже показал пример на основе твоего, фактически дал готовое решение, перечитывай до полного понимания. Таких ссылок как у тебя не бывает, добавь хотябы href. |
Чтобы не перекидывало по ссылке нужно делать return false; или вообще не использовать <a>
<html> <head><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></head> <body> <div class="menu"> <a href="/menu.php?one">одын</a> <a href="/menu.php?two">два</a> <a href="/menu.php?tree">тры</a> </div> <script>$('.menu').click(function (e) { alert(e.target.href); return false; })</script> </body> </html> А вообще не плохо было бы вам прочить учебник, любой для начала. |
В общем сделал вот так:
<html> <head><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></head> <body> <div class="menu"> <a href="/menu.php?one">одын</a> <a href="/menu.php?two">два</a> <a href="/menu.php?tree">тры</a> </div> <div id="content"></div> <script> $('.menu').click(function (e) { $.ajax({ type: "POST", url: "greetings.php", data: "username="+e.target.href, success: function(html){ $("#content").html(html); } }); return false; }) </script> </body> </html> Gozar, спасибо большое! |
Почему-то если я передаю так: data: "username="+e.target.href тогда ссылка передается до второго параметра, то есть до &.
скрипт greetings.php элементарный, просто пишу там <?= $_REQUEST['username']; ?> Не понимаю почему так, но в data точно попадает ссылка целеком, проверял alert-ом. теперь делаю так: <html> <head> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> </head> <body> <div class="menu"> <a href="?type=album&id=4">Альбомы</a> | <a href="?type=category&id=4">Категории</a> </div> <div id="content"></div> <script> $('.menu').click(function (e) { $.ajax({ type: "GET", url: "greetings.php?"+e.target.href, success: function(html){ $("#content").html(html); } }); return false; }) </script> </body> </html> url с которого запускаю скрипт: http://site/ajax/ в файле greetings.php пишу <?= $_SERVER['QUERY_STRING']; ?> и при нажатии на ссылку он мне выводит такой вот url, по идее то что мне и нужно: http://site/ajax/?type=album&id=4 Это правильно так получать значения параметров, без data? |
Цитата:
|
Часовой пояс GMT +3, время: 21:45. |