jQuery: обработка параметров URL

Владимир | | Ajax, HTML, JavaScript, Web разработка.

jquery parsequery

Приветствую всех!

Сегодня хочу показать небольшой пример использования библиотеки 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, то ничего особенного не произойдет. При кликах по ссылкам будут отправляться обычные запросы.

Если есть вопросы или замечания, пишите.

Успехов!

Интересно почитать

Платежный модуль Robokassa для Magento с поддержкой.

Нужна фотокнига? В наличие фотокниги образцы, множество видов дизайна и верстки

  • Все подробно разжевано. В общем как всегда. Для новичков будет полезным!

  • Максим Фуртуна

    А чем bbq плох ? Он даже хеш навигацию может осилить

    • jQuery BBQ ничем не плох, но он создавался для работы с историей, а не просто разбора URL. Соответственно и размер его в 8 раз больше, чем у parseQuery.

  • Правильным путем идете товарищ. Делать надо так, что бы не зависело от включенного или выключено JSа

  • Я бы заменил

    $('a.delete').click(function() { return false; });

    на

    $('a.delete').click(function(e) { e.preventDefault(); });

  • Sssv

    asd

  • Sergiy Stotskiy

    defsdf

  • Артем Петрусенко

    Спасибо, то что искал, сейчас буду пробовать.