Сейчас я вам расскажу, как при помощи 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. Ну а теперь по порядку.
После выполнения скрипта, наш старый урл: localhost/catalog/samsung/?login=myLogin&page=phone
заменится на новый: localhost/catalog/samsung/?login=phone&page=myLogin
Собственно это всё, что я хотел вам сегодня рассказать. Оставляйте свои комментарии и не забывайте делиться этой записью в социальных сетях.
Современные веб-ресурсы не просто предоставляют информацию посетителю, но и взаимодействуют с ним. Для взаимодействия с пользователем нужно получать некоторую информацию от него. Для получения данных есть несколько методов, очень распространенные методы GET
и POST
. И соответственно в PHP
есть поддержка этих методов передачи данных GET
и POST
. Посмотрим, как работают эти методы.
Метод GET
Данные методом GET
передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. Для пояснения данного метода наберите в адресной строке браузера URL-адрес ресурса и добавьте сначала знак вопроса (?
), а затем строчку num=10
. Например
http://домен.ru/script.php?num=10
http://localhost/script.php?num=10
http://домен.ru/script.php?num=10&type=new&v=text
Проверка метода GET в PHP
http://путь/script.php?num=10&type=new&v=text
Введите число
У Вас есть компьютер?
Да
Нет
Ваш комментарий:
Форма для передачи данных методом GET и PHP
Введите число
У Вас есть компьютер?
Да
Нет
Ваш комментарий:
Введите число
У Вас есть компьютер?
Да
Нет
Ваш комментарий:
Форма для передачи данных методом POST и PHP
Введите число
У Вас есть компьютер?
Да
Нет
Ваш комментарий:
Проверка метода POST в PHP
Практически на каждом сайте можно видеть ссылки, содержащие в себе параметры после знака "?", например, 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 удаляет…