как правильно построить скрипт на 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, время: 17:03. |