Сегодня хочу показать небольшой пример использования библиотеки jQuery для работы с параметрами ссылок.
Предположим на нашей странице есть ссылка, клик по которой отправляет запрос на выполнение некоторой операции. Пускай это будет удаление какого-нибудь объекта.
HTML разметка такой ссылки может выглядеть следующим образом.
<a class="delete" href="http://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>
Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.
Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.
$('a.delete').click(function() {
return false;
});
Этот код блокирует отправку обычного запроса при клике по ссылке. Нам нужно получить параметры и отправить AJAX запрос.
В обработчике события click получить значение атрибута href ссылки можно следующим образом.
$(this).attr('href')
Затем нужно найти в этой строке параметры. Тут есть два варианта.
1) Если вам достаточно параметров, указанных в атрибуте href и вы не хотите их изменять, то просто передать методам $.ajax (или $.post, или $.get) строку с параметрами запроса.
Т.е. код будет выглядеть примерно так
var params = $(this).attr('href').split('?');
$.post('ajax_delete.php', params[1], function(response) {
console.log(response);
} );
Здесь мы с помощью метода split разбили запрос на две части (по знаку вопроса), и передали методу $.post второй элемент массива params. Для данного примера он выглядит так
action=delete_object&object_id=1
2) Если перед отправкой AJAX запроса нужно изменить/удалить/добавить какие-то параметры, то удобнее всего преобразовать строку с параметрами в хеш.
Для этих целей существует специальный плагин – parseQuery
Использовать его можно так.
var params = $.parseQuery($( this ).attr( 'href' ).split('?'));
В результате вы получите хеш
{
action: delete_object,
object_id: 1
}
Код отправки AJAX запроса при этом не изменяется. Точно также передаёте переменную params во втором параметре метода $.post.
В заключение посмотрите код обработчика целиком.
$(document).ready(function() {
$('a.delete').click( function() {
var params = $(this).attr('href').split('?');
$.post('ajax_delete.php', params[1], function(response) {
console.log(response);
});
return false;
});
});
Как видите, задача решается с помощью минимального количества кода. И если у посетителя будет отключен JavaScript, то ничего особенного не произойдет. При кликах по ссылкам будут отправляться обычные запросы.