Få parametrar från url jquery. Strängparametrar (GET) i Javascript

På nästan alla webbplatser kan du se länkar som innehåller parametrar efter "?"-tecknet, till exempel http://some.site.com/?id=1. Vanligtvis hanterar ett serverskript bearbetningen av sådana parametrar, men ibland finns det ett behov av att ta reda på dessa parametrar i JavaScript. Dagens berättelse kommer att berätta hur du gör detta.

Vilka är de så kallade GET-parametrarna? I själva verket är detta bara en adresssträng, men det är vanligt att om ett "?"-tecken finns i en URL, så är alla tecken efter det parametrar. Tolkningen av parametrar är standard: först kommer variabelnamnet, sedan "="-symbolen, sedan variabelvärdet, variablerna separeras med "&"-symbolen. Du kan ta reda på den aktuella adressen i JavaScript genom att läsa värdet för window.location. Analysera raden efter "?" du måste göra det i två omgångar: först dela upp det i "variabel=värde"-grupper och dela upp det sedan i dess beståndsdelar.

Att dela en parametersträng underlättas av det faktum att JavaScript har en speciell strängfunktion - split(), vars resultat blir en array av strängar. För att använda det måste du först skapa ett String-objekt, eftersom denna funktionär en metod för detta objekt. Detta görs enkelt:

someVar = new String("viss text");

Sedan delar vi upp strängen i delsträngar:

someArray = someVar.split("x");

Där "x" är symbolen för att dela en sträng i delsträngar. För att hitta ett tecken i en sträng måste du använda ett annat strängfunktion- index för():

someVar.indexOf("?");

Introduktionen till teorin är klar. Låt oss börja öva. Jag bestämde mig för att alla GET-variabler skulle lagras i två separata globala arrayer: en lagrar namnen, den andra lagrar värdena. Tyvärr stöds inte JavaScript associativa arrayer, så låt oss använda metoden jag angav. Det är också nödvändigt att spara antalet GET-variabler. Naturligtvis kan du alltid anropa funktionen för att beräkna storleken på arrayen, men stilmässigt är min metod bättre. Och så, globala variabler och arrayer:

var_GET_Keys; // För närvarande en tom array var _GET_Values; var_GET_Count = 0; // inga element ännu var _GET_Default = ""

Innebörden av variabeln _GET_Default kommer att förklaras senare. Därefter skapar jag en get_parseGET() funktion som kommer att analysera webbadresser och skapa arrayer med variabler. Allra i början skapar funktionen ett strängobjekt och kontrollerar förekomsten av tecknet "?"

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

Nu delar vi upp raden i "variabel=värde"-grupper, beräknar det totala antalet variabler och förbereder oss för att skapa de nödvändiga arrayerna:

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

Och slutligen delar vi upp de resulterande grupperna i två arrayer med namnen på variablerna och deras värden:

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

I i detta exempel konstruktionen för .. används, som itererar genom alla element i arrayen. Syntaxen för denna konstruktion är:

for (nyckel i array) ( // Dina handlingar )

där nyckel är namnet på nyckeln som kommer att väljas från array. I slingans kropp kan det aktuella elementet nås med array.

Den andra funktionen från biblioteket, get_fetchVar(key), låter dig ta reda på värdet på en given GET-variabel. Det fungerar genom att helt enkelt iterera genom _GET_Keys-arrayen. Om nyckeln inte hittas returnerar den värdet _GET_Default, som nämndes ovan. Jag skulle vilja notera att _GET_Default-värdet INTE behöver ändras i själva biblioteket - vid behov kan detta göras i din HTML-kod:

_GET_Default="tra la la";

I slutet av skriptet finns ett anrop till get_parseGET(); och det är här biblioteket slutar.

Bra dålig

På nästan alla webbplatser kan du se länkar som innehåller parametrar efter "?"-tecknet, till exempel http://some.site.com/?id=1. Vanligtvis bearbetar sådana parametrar...

Det finns flera metoder för att ta bort ett array-element i JavaScript. Dessa inkluderar pop och shift-metoderna. Popmetoden tar bort det första elementet från den givna arrayen. Skiftmetoden tar bort...

Moderna webbresurser ger inte bara information till besökaren, utan interagerar också med honom. För att interagera med användaren måste du få lite information från denne. Det finns flera metoder för att hämta data, mycket vanliga metoder är GET och POST. Och följaktligen har PHP stöd för dessa dataöverföringsmetoder GET och POST. Låt oss se hur dessa metoder fungerar.
GET-metod Data överförs med GET-metoden genom att lägga till den i URL:en för ett skript som anropas för att behandla den mottagna informationen. För att förklara denna metod, skriv in adressfält webbläsar-URL för resursen och lägg först ett frågetecken (?) och sedan raden num=10 . Till exempel

http://domain.ru/script.php?num=10

Om du har lokal server, då brukar domänen vara localhost , och sedan föregående post ska titta

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

I det här fallet skickar vi parametern num lika med 10. För att lägga till följande parametrar Skriptet måste till exempel använda et-teckenavgränsaren (&).

http://domain.ru/script.php?num=10&type=new&v=text

I I detta fall vi skickade tre parametrar till skriptet: num med värdet 10, skriv med värdet "new" och v med värdet "text".
För att få dessa parametrar i skriptet måste du använda den inbyggda arrayen $_GET $_GET["num"], $_GET["type"], $_GET["v"] . Dessa arrayelement kommer att innehålla värdena för de passerade parametrarna. För att demonstrera detta exempel, skapa en script.php-fil med följande innehåll

Undersökning GET-metoden i PHP

Och ring nu den här filen i webbläsaren

http://path/script.php?num=10&type=new&v=text

och du kommer att se de angivna parametrarna i webbläsarfönstret. Men om du kallar den här filen utan ytterligare parametrar http://path/script.php , du kommer att se de fel som det kommer att ge PHP-tolk, att det inte finns några sådana element i $_GET-matrisen. Mer än en artikel kan ägnas åt att kontrollera uppgifterna från användaren, så i den här artikeln kommer jag inte att beröra denna punkt.
Som du säkert förstår är det inte särskilt bra att tvinga användaren att skriva data i webbläsarens adressfält och det är helt obekvämt. Därför måste du använda html-formulär för att ta emot data från användaren. Låt oss skriva ett enkelt html-formulär.

Ange numret

Har du en PC?
Ja
Nej


Din kommentar:

Låt mig kommentera lite om det skapade formuläret. Formulär skapas med formulärtaggen. Formulärfält skapas med hjälp av input, select, textarea-taggar (du kan läsa mer). I formtaggen handlingsattribut anger URL:en till skriptet som ska ta emot formulärdata. I vårt fall specificerade vi vår befintliga script.php-fil. Metodattributet anger metoden för att skicka data. Vi specificerade GET-metoden. Nu vet vi vilken fil formulärdata kommer att överföras till, och på vilket sätt återstår bara att ta reda på var man ska leta efter det?!
Denna formulärdata kommer att skickas till webbresursen av webbläsaren genom att lägga till den i URL:en: först kommer det att finnas ett frågetecken (?), sedan kommer parametrarna att presenteras åtskilda av ett et-tecken (&). Namnet på parametern kommer att hämtas från namnattributet, som måste anges för alla formulärfält. Värdet på parametern beror på fälttypen. Om fältet är ett textfält kommer värdet att vara den text som användaren anger. Om fältet är en lista, en grupp med alternativknappar eller kryssrutor, kommer värdet på parametern att vara värdet på värdeattributet för det valda elementet. Låt mig förklara med vårt formulär som exempel. Om användaren anger siffran 10 i inmatningsfältet, kommer namnet på parametern att vara num (värdet på namnattributet för inmatningstaggen) och värdet blir 10 (numret som angetts av användaren). Följaktligen kommer webbläsaren att generera ett par "num=10". Om användaren väljer alternativet "Ja" från listan, kommer namnet på parametern att vara typ (värdet på namnattributet för select-taggen) och värdet kommer att vara ja (värdet på alternativets värdeattribut märka). Följaktligen kommer webbläsaren att generera ett "typ=ja"-par.
Nu kommer vi att placera detta formulär på forma.php-sidan.

Formulär för att överföra data med GET- och PHP-metoder



Ange numret

Har du en PC?
Ja
Nej


Din kommentar:

Ange eventuella värden i formulärfälten och klicka på knappen "Skicka". Efter att ha klickat på knappen kommer webbläsaren att öppna en annan sida (script.php) och den information du angav kommer att visas i webbläsarfönstret. Jag tror att det är tydligt varför: webbläsaren skickar data till script.php-skriptet, och i skriptet kommer dessa data att bearbetas och visas på skärmen.
POST-metoden Låt oss nu titta på hur POST-metoden fungerar.
För att skicka data med POST-metoden måste du använda HTML-formulär. Som vi minns är metodattributet ansvarigt för metoden för att skicka formulärdata form tagg. Därför måste du ange värdet POST i metodattributet för formtaggen. Annars kan formuläret vara detsamma som för GET-metoden. Låt oss ändra vårt formulär, som vi redan har använt för att överföra data med GET-metoden, till att överföra med POST-metoden.

Ange numret

Har du en PC?
Ja
Nej


Din kommentar:

Som du kan se förblir formen densamma förutom metod- och åtgärdsattributen. Data kommer nu att skickas till script_post.php-skriptet. Låt oss placera vårt formulär på sidan forma_post.php.

Formulär för att överföra data med POST- och PHP-metoder



Ange numret

Har du en PC?
Ja
Nej


Din kommentar:

Nu måste vi skriva ett skript som kommer att behandla våra formulärdata.
För att ta emot data från POST-metoden i ett skript måste du använda den inbyggda $_POST-arrayen. Nycklarna för denna array kommer att vara namnen på parametrarna. I vårt fall måste vi använda $_POST["num"], $_POST["typ"],$_POST["v"] . Dessa arrayelement kommer att innehålla värdena för överförda data. Som du kan se uttrycks skillnaden från att använda GET-metoden endast i användningen av $_POST-matrisen. Därför kommer det inte att vara svårt för oss att skriva filen script_post.php:

Undersökning POST-metoden i PHP

Öppna nu filen forma_post.php i din webbläsare. Ange några uppgifter i formulärfälten och klicka på knappen "Skicka". Nu har du förmodligen märkt skillnaden mellan POST-metoden och GET-metoden - formulärdata dök inte upp i webbläsarens adressfält. Data kan inte skickas med POST-metoden via webbläsarens adressfält. Detta är en betydande skillnad att komma ihåg.
I PHP, oavsett hur data skickades - POST-metoden eller GET-metoden - kan du hämta data med $_REQUEST-arrayen Jämförelse av GET- och POST-metoderna När du använder GET-metoden överförs data genom att lägga till. URL. Därmed kommer de att vara synliga för användaren, vilket inte alltid är bra ur säkerhetssynpunkt. Den maximala mängden data som överförs kommer också att bero på webbläsaren - på det högsta tillåtna antalet tecken i webbläsarens adressfält.
När du använder POST-metoden kommer data inte att vara synliga för användaren (visas inte i webbläsarens adressfält). Och därför är de säkrare, och följaktligen är programmet som behandlar dessa data mer skyddat när det gäller säkerhet. Dessutom är volymen av överförda data praktiskt taget obegränsad.
När du väljer en dataöverföringsmetod måste du ta hänsyn till ovanstående funktioner och välja den mest lämpliga metoden.

Nu ska jag berätta hur vi med js enkelt och enkelt kan manipulera webbadressen i webbläsaren utan att ladda om sidan. För att göra detta kommer vi att använda följande funktion: history.pushState(). Det är värt att uppmärksamma det faktum att det bara fungerar med html5-stödda webbläsare! Den har 3 parametrar där vi i princip inte kan skicka någonting, dvs:

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

I den första av metoderna passerar vi objektets tillstånd. Det andra är inget annat än Namnet (förresten, idag ignoreras det...). Och den tredje parametern är själva URL:en.

I den här artikeln kommer vi bara att överväga den tredje.

I URL-parametern behöver vi helt enkelt skicka en sträng som kommer att ersättas i URL:en från webbplatsens rot.

Låt oss lägga till en URL

Vår URL i sig kommer förmodligen att vara den enklaste: http://localhost/

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

När du har kört det här skriptet ser du i adressfältet: localhost/catalog/?login=myLogin&page=phone

Men var försiktig. Sedan vår URL har ändrats. När du sedan klickar på uppdatera sidan kommer webbläsaren att försöka gå till den nya webbadressen. Och om din webbplats inte har en /catalog/-sektion, kommer du att se ett 404-fel.

Låt oss ändra den befintliga webbadressen

Det andra exemplet kommer hit: localhost/catalog/samsung/?login=myLogin&page=phone

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

Rad 1: Hämta sökvägen i förhållande till värden och använd split för att dela upp den i en array
Rad 2: Vi skapar en ny URL som består av ordet "bazar" + den andra nyckeln i vår array, som innehåller ordet samsung, och i slutet lade vi till vår get
Rad 3: Egentligen själva ersättaren.

När du har kört det här skriptet ser du i adressfältet: localhost/bazar/samsung/?login=myLogin&page=phone

Ändra GET-parametrar

Låt oss titta på samma exempel.

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);

Naturligtvis är detta manus ett demonstrationsmanus och förmodligen det enklaste. Efter dess exekvering kommer värdena för GET-parametrarna att bytas ut i webbläsarens adressfält. ?login=myLogin&page=phone kommer att ändras till ?login=phone&page=myLogin. Nåväl, nu, i ordning.

linje: Vi får en rad delade GET-parametrar med hjälp av &-symbolen

line: Eftersom window.location.searche returnerar parametrar tillsammans med separatorn - ? tar vi bort den.

line: Skapa en array

line: Låt oss gå igenom vår array

linje: Dela värdet på nycklarna.

rad: Samla ny linje med parametrar.
Naturligtvis kunde denna punkt ha gjorts annorlunda, men inom ramen för lektionen kommer vi att göra det på enklaste sätt.

rad: Samlar in en ny URL

radbyte url

Efter att ha kört skriptet, vår gamla URL: localhost/catalog/samsung/?login=myLogin&page=phone
kommer att ersättas med en ny: localhost/catalog/samsung/?login=phone&page=myLogin

Det var faktiskt allt jag ville berätta för dig idag. Lämna dina kommentarer och glöm inte att dela detta inlägg på sociala nätverk.