Получение get параметров из url jquery. Параметры строки (GET) в Javascript


Практически на каждом сайте можно видеть ссылки, содержащие в себе параметры после знака "?", например, http://some.site.com/?id=1. Обычно обработкой таких параметров занимается серверный скрипт, но иногда возникает необходимость узнать эти параметры внутри JavaScript. О том, как это сделать, и пойдёт рассказ сегодня.

Что представляют из себя, так называемые, GET-параметры? На самом деле — это просто строка адреса, но принято, что если в URL-е встречается символ "?", то все символы после него являются параметрами. Трактовка параметров — стандартна: сначала идёт название переменной, потом символ "=", потом значение переменной, переменные разделяются символом "&". Узнать текущий адрес в JavaScript можно прочитав значение window.location. Парсить строку после "?" придётся в два прохода: сначала разбить на группы "переменная=значение", а потом уже разбить на составные части.

Разбиение строки параметров облегчается тем, что в JavaScript имеется специальная строковая функция — split(), результатом которой будет массив строк. Для того, чтобы её использовать, сначала необходимо создать обьект String, так как данная функция является методом этого обьекта. Делается это просто:

someVar = new String("some text");

Затем делим строку на подстроки:

someArray = someVar.split("x");

Где "x" — символ деления строки на подстроки. Для того, чтобы найти в строке какой-либо символ, необходимо воспользоваться ещё одной строковой функцией — indexOf():

someVar.indexOf("?");

Ввод в теорию закончен. Приступим к практике. Я решил, что все GET-переменные стоит хранить в двух отдельных глобальных массивах: один хранит названия, другой — значения. К сожалению JavaScript не поддерживает ассоциативные массивы, поэтому воспользуемся указанным мною способом. Также необходимо сохранить количество GET-переменных. Конечно, всегда можно вызвать функцию подсчёта размера массива, но стилистически мой метод лучше. И так, глобальные переменные и массивы:

var _GET_Keys; // Пока что пустой массив var _GET_Values; var _GET_Count = 0; // элементов пока нет var _GET_Default = ""

Значение переменной _GET_Default будет обьяснено позже. Далее создам функцию get_parseGET(), которая будет парсить URL и создавать массивы с переменными. В самом начале функция создаёт обьект String и проверяет в нём наличие символа "?":

l = get.length; get = get.substr(x+1, l-x);

Теперь делим строку на группы "переменная=значение", вычисляем общее количество переменных и подготавливаемся к создаиню необходимых массивов:

l = get.split("&"); x = 0; _GET_Count = l.length; _GET_Keys = new Array(_GET_Count); _GET_Values = new Array(_GET_Count);

И в заключение разделяем полученные группы на два массива с именами переменных и их значениями:

for(i in l) { get = l[i].split("="); _GET_Keys[x] = get; _GET_Values[x] = get; x++; }

В данном примере используется конструкция for .. in, перебирающая все элементы массива. Синтаксис данной конструкции:

for (key in array) { // Ваши действия }

где key — название ключа, которое будет выбрано из массива array. В теле цикла к текущему элементу можно бдует обратиться array.

Вторая функция из библиотеки — get_fetchVar(key), позволяет узнать значение заданной GET-переменной. Работает простым перебором массива _GET_Keys. Если ключ не найден, то возвращает значение _GET_Default, которое упоминалось выше. Хочу заметить, что значение _GET_Default вовсе НЕ обязательно менять в самой библиотеке — при необходимости, это можно сделать в Вашем HTML-коде:

_GET_Default="tra la la";

В самом конце скрипта следует вызов get_parseGET(); и на этом библиотека заканчивается.

Хорошо Плохо

    Практически на каждом сайте можно видеть ссылки, содержащие в себе параметры после знака "?", например, http://some.site.com/?id=1. Обычно обработкой таких параметров…

    В JavaScript удалить элемент массива можно несколькими методами. К ним относятся методы pop и shift. Метод pop удаляет первый элемент из заданного массива. Метод shift удаляет…

Современные веб-ресурсы не просто предоставляют информацию посетителю, но и взаимодействуют с ним. Для взаимодействия с пользователем нужно получать некоторую информацию от него. Для получения данных есть несколько методов, очень распространенные методы GET и POST . И соответственно в PHP есть поддержка этих методов передачи данных GET и POST . Посмотрим, как работают эти методы.
Метод GET Данные методом GET передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. Для пояснения данного метода наберите в адресной строке браузера URL-адрес ресурса и добавьте сначала знак вопроса (? ), а затем строчку num=10 . Например

http://домен.ru/script.php?num=10


Если у вас локальный сервер, то обычно домен будет localhost , и тогда предыдущая запись будет выглядеть

http://localhost/script.php?num=10


В этом случае мы передаем параметр num равный 10. Для добавления следующих параметров сценарию нужно использовать разделитель - амперсант (& ), например

http://домен.ru/script.php?num=10&type=new&v=text


В данном случае мы передали скрипту три параметра: num со значением 10, type со значением "new " и v со значением "text ".
Для получения этих параметров в скрипте нужно использовать встроенный массив $_GET $_GET["num"], $_GET["type"],$_GET["v"] . Эти элементы массива и будут содержать значения переданных параметров. Для демонстрации этого примера создайте файл script.php следующего содержания



Проверка метода GET в PHP





И теперь вызовите этот файл в браузере

http://путь/script.php?num=10&type=new&v=text


и вы увидите переданные параметры в окне браузера. Но если вы вызовите этот файл без дополнительных параметров http://путь/script.php , то увидите ошибки, которые выдаст интерпретатор PHP , о том, что таких элементов массива $_GET нет. Проверке данных получаемых от пользователя можно посветить не одну статью, поэтому в этой статье я не буду затрагивать этот момент.
Как вы, наверное, понимаете заставлять пользователя набирать данные в адресной строке браузера не очень хорошо и совсем неудобно. Поэтому для приема данных от пользователя нужно использовать html -формы. Напишем простенькую html -форму.


Введите число

У Вас есть компьютер?
Да
Нет


Ваш комментарий:





Немного прокомментирую созданную форму. Формы создаются тегом form . Поля формы создаются тегами input , select , textarea (подробнее можно почитать ). В теге form в атрибуте action указывается URL-адрес скрипта, который получит данные формы. В нашем случае мы указали уже существующий у нас файл script.php . Атрибут method задает метод отправки данных. Мы указали метод GET . Теперь мы знаем, какому файлу будут переданы данные формы, и каким способом, осталось разобраться, где их там искать?!
Данные этой формы будут переданы веб-ресурсу браузером путем добавления их к URL-адресу: сначала будет знак вопроса (? ), затем будут представлены параметры разделенные амперсантом (& ). Название параметра будет браться из атрибута name , которое должно быть прописано у любого поля формы. Значение параметра будет зависеть от типа поля. Если поле является текстовым, то значением будет введенный пользователем текст. Если же поле будет представлять собой список, группу переключателей или флажков, то значением параметра будет значение атрибута value выбранного элемента. Поясню на примере нашей формы. Если пользователь введет в поле input число 10, то названием параметра будет num (значение атрибута name тега input ), а значением будет 10 (введенное пользователем число). Соответственно браузер сформирует пару "num=10 ". Если пользователь из списка выберет вариант "Да", то названием параметра будет type (значение атрибута name тега select ), а значением будет yes (значение атрибута value тега option ). Соответственно браузер сформирует пару "type=yes ".
Теперь эту форму разместим на странице forma.php .



Форма для передачи данных методом GET и PHP



Введите число

У Вас есть компьютер?
Да
Нет


Ваш комментарий:







Введите в поля формы какие-либо значения и нажмите кнопку "Отправить". После нажатия кнопки браузер откроет другую страницу (script.php ), и в окне браузера будут отображены данные, которые вы ввели. Я думаю понятно почему: браузер передаст данные сценарию script.php , и в скрипте эти данные будут обработаны и выведены на экран.
Метод POST Теперь давайте рассмотрим, как работает метод POST .
Для отправки данных методом POST нужно использовать HTML -формы. Как мы помним, что за способ отправки данных формы отвечает атрибут method тега form . Поэтому нужно в атрибуте method тега form указать значение POST . В остальном форма может быть та же, как и для метода GET . Изменим нашу форму, которую мы уже использовали для передачи данных способом GET , для передачи методом POST .


Введите число

У Вас есть компьютер?
Да
Нет


Ваш комментарий:





Как видите, форма осталась та же за исключением атрибутов method и action . Теперь данные будут передаваться сценарию script_post.php . Поместим нашу форму на странице forma_post.php .



Форма для передачи данных методом POST и PHP



Введите число

У Вас есть компьютер?
Да
Нет


Ваш комментарий:







Теперь надо написать сценарий, который будет обрабатывать данные нашей формы.
Для получения в скрипте данных переданным методом POST нужно использовать встроенный массив $_POST . Ключами этого массива будут названия параметров. В нашем случае нужно использовать $_POST["num"], $_POST["type"],$_POST["v"] . Эти элементы массива и будут содержать значения переданных данных. Как видите отличие от использования способа GET , выражается лишь в использовании массива $_POST . Поэтому нам не составит труда написать файл script_post.php :



Проверка метода POST в PHP





Теперь откройте файл forma_post.php в браузере. Введите какие-нибудь данные в поля формы и нажмите кнопочку "Отправить". Сейчас, наверное, вы заметили отличие метода POST от GET - в адресной строке браузера не появились данные формы. Данные методом POST нельзя передать через адресную строку браузера. Это существенное отличие нужно запомнить.
В PHP в независимости, каким способом были отправлены данные - методом POST или методом GET - получить данные можно используя массив $_REQUEST .Сравнение методов GET и POST При использовании метода GET данные передаются путем добавления к URL-адресу. Таким образом, они будут видны пользователю, что с точки зрения безопасности не всегда хорошо. Также максимальный объем передаваемых данных будет зависеть от браузера - от максимально-допустимого количества символов адресной строке браузера.
При использовании метода POST данные не будут видны пользователю (не отображаются в адресной строке браузера). И поэтому они более защищены, а, следовательно, и программа обрабатывающая эти данные более защищена в плане безопасности. Также объем передаваемых данных практически ни чем не ограничен.
Выбирая способ передачи данных нужно учитывать приведенные особенности и останавливаться на наиболее приемлемом методе.

Сейчас я вам расскажу, как при помощи js мы можем легко и просто манипулировать урлом в браузере, не перезагружая страницу. Для этого мы воспользуемся следующей функцией: history.pushState(). Стоит обратить внимание на то, что она работает только с html5 поддерживаемыми браузерами! Имеет 3 параметра, в которых, мы можем по сути ничего не передавать т.е.:

History.pushState("","","");

В первом из методов мы передаём состояние объекта. Второй не что иное как Название (кстати, на сегодняшний день, он игнорируется...). И третий параметр есть сам урл.

В рамках данной статьи мы рассмотрим только третий.

В параметре урла от нас требуется просто передать строку, которая подставится в урл, от корня сайта.

Добавим урл

собственно наш урл будет, наверное самым простом: http://localhost/

Var newUrl = "/catalog/?login=myLogin&page=phone"; history.pushState("", "", newUrl);

После выполнения данного скрипта вы увидите в адресной строке: localhost/catalog/?login=myLogin&page=phone

Но будьте осторожны. Так как у нас изменился урл. То при нажатии обновлении страницы, браузер попробует зайти именно уже на новый урл. И если на вашем сайте нет раздела /catalog/ то вы увидите 404ю ошибку.

Изменим существующий урл

Второй пример пройдёт вот тут: localhost/catalog/samsung/?login=myLogin&page=phone

Var arUrl = window.location.pathname.split("/"); var newUrl = "/bazar/"+arUrl+"/"+window.location.search; history.pushState("", "", newUrl);

1 строка: Получаем путь относительно хоста и при помощи сплита разбиваем на массив
2 строка: Составляем новый урл состоящий из слова "bazar" + второй ключ нашего массива, который содержит слово samsung, и в конце добавили наши get
3 строка: Собственно сама замена.

После выполнения данного скрипта, вы увидите в адресной строке: localhost/bazar/samsung/?login=myLogin&page=phone

Изменяем GET параметры

Рассмотрим на том же самом примере.

Var arUrl = window.location.search.split("&"); arUrl = arUrl.slice(1); var arr=; $.each(arUrl,function(i,elem){ arr[i] = elem.split("="); }); var newUrl = arr+"="+arr+"&"+arr+"="+arr; newUrl = window.location.pathname+"?"+newUrl; history.pushState("", "", newUrl);

Разумеется данный скрипт является демонстрационным и, наверняка, самым простым. После его исполнения в адресной строке браузера произойдёт смена местами значений GET параметров. ?login=myLogin&page=phone поменяется на?login=phone&page=myLogin. Ну а теперь по порядку.

  • строка: Получаем массив разбитых GET параметров, символом &
  • строка: Так как window.location.searche возвращает параметры совместно с разделителем - ?, то удаляем его.
  • строка: Создаём массив
  • строка: Пробегаемся по нашему массиву
  • строка: Делим значение ключей.
  • строка: Собираем новую строку с параметрами.
    Конечно данный пункт можно было сделать по другому, но в рамках урока сделаем самым простым образом.
  • строка: Собираем новый урл
  • строка заменяем урл

    • После выполнения скрипта, наш старый урл: localhost/catalog/samsung/?login=myLogin&page=phone
    заменится на новый: localhost/catalog/samsung/?login=phone&page=myLogin

    Собственно это всё, что я хотел вам сегодня рассказать. Оставляйте свои комментарии и не забывайте делиться этой записью в социальных сетях.
    

    2024 © gtavrl.ru.