• hjem
  •  > 
  • Sikkerhet
  •  > 
  • Js hvordan du leser en spesifikk get-forespørsel. Stringparametere (GET) i Javascript

Js hvordan du leser en spesifikk get-forespørsel. Stringparametere (GET) i Javascript

På nesten alle nettsteder kan du se koblinger som inneholder parametere etter "?"-tegnet, for eksempel http://some.site.com/?id=1. Vanligvis håndterer et serverskript behandlingen av slike parametere, men noen ganger er det behov for å finne ut disse parameterne inne i JavaScript. Dagens historie vil fortelle deg hvordan du gjør dette.

Hva er de såkalte GET-parametrene? Faktisk er dette bare en adressestreng, men det er vanlig at hvis et "?"-tegn er funnet i en URL, så er alle tegnene etter det parametere. Tolkningen av parametere er standard: først kommer variabelnavnet, deretter "="-symbolet, deretter variabelverdien, variablene er atskilt med "&"-symbolet. Du kan finne ut gjeldende adresse i JavaScript ved å lese verdien til window.location. Parse linjen etter "?" du må gjøre det i to omganger: først dele det inn i "variable=value"-grupper, og deretter dele det inn i komponentene.

Splitting av en parameterstreng gjøres enklere av det faktum at JavaScript har en spesiell strengfunksjon - split(), hvis resultat vil være en rekke strenger. For å bruke det, må du først lage et String-objekt, siden denne funksjonen er en metode for dette objektet. Dette gjøres enkelt:

someVar = new String("noen tekst");

Deretter deler vi strengen i understrenger:

someArray = someVar.split("x");

Hvor "x" er symbolet for å dele en streng i understrenger. For å finne et tegn i en streng, må du bruke et annet strengfunksjon- oversikt over():

someVar.indexOf("?");

Innledningen til teorien er fullført. La oss begynne å øve. Jeg bestemte meg for at alle GET-variabler skulle lagres i to separate globale matriser: den ene lagrer navn, den andre lagrer verdier. Dessverre støttes ikke JavaScript assosiative arrays, så la oss bruke metoden jeg indikerte. Det er også nødvendig å lagre antall GET-variabler. Selvfølgelig kan du alltid kalle funksjonen for å beregne størrelsen på matrisen, men stilmessig er metoden min bedre. Og så, globale variabler og matriser:

var_GET_Keys; // Foreløpig en tom matrise var _GET_Values; var_GET_Count = 0; // ingen elementer ennå var _GET_Default = ""

Betydningen av _GET_Default-variabelen vil bli forklart senere. Deretter skal jeg lage en get_parseGET()-funksjon som vil analysere URL-er og lage matriser med variabler. Helt i begynnelsen oppretter funksjonen et String-objekt og sjekker for tilstedeværelsen av tegnet "?"

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

Nå deler vi linjen inn i "variabel=verdi"-grupper, beregner det totale antallet variabler og forbereder oss på å lage de nødvendige matrisene:

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

Og til slutt deler vi de resulterende gruppene i to matriser med navnene på variablene og deres verdier:

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

I i dette eksemplet for .. i konstruksjon brukes, som itererer gjennom alle elementene i matrisen. Syntaksen til denne konstruksjonen er:

for (tast inn matrise) ( // Dine handlinger)

hvor nøkkel er navnet på nøkkelen som skal velges fra array. I sløyfens kropp kan det nåværende elementet nås via array.

Den andre funksjonen fra biblioteket, get_fetchVar(key), lar deg finne ut verdien av en gitt GET-variabel. Det fungerer ved ganske enkelt å iterere gjennom _GET_Keys-arrayet. Hvis nøkkelen ikke blir funnet, returnerer den _GET_Default-verdien, som ble nevnt ovenfor. Jeg vil merke meg at _GET_Default-verdien IKKE må endres i selve biblioteket - om nødvendig kan dette gjøres i HTML-koden din:

_GET_Default="tra la la";

Helt på slutten av skriptet er det et kall til get_parseGET(); og det er her biblioteket slutter.

Bra dårlig

    På nesten alle nettsteder kan du se koblinger som inneholder parametere etter "?"-tegnet, for eksempel http://some.site.com/?id=1. Vanligvis behandler slike parametere...

    Det er flere metoder for å fjerne et array-element i JavaScript. Disse inkluderer pop- og shift-metodene. Pop-metoden fjerner det første elementet fra gitt array. skiftmetode sletter...

Nå skal jeg fortelle deg hvordan vi ved å bruke js enkelt og enkelt kan manipulere URL-en i nettleseren uten å laste inn siden på nytt. For å gjøre dette bruker vi følgende funksjon: history.pushState(). Det er verdt å være oppmerksom på at det bare fungerer med html5-støttede nettlesere! Den har 3 parametere der vi i hovedsak ikke kan sende noe, dvs.:

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

I den første av metodene passerer vi tilstanden til objektet. Den andre er ikke noe mer enn Navnet (forresten, i dag ignoreres det...). Og den tredje parameteren er selve URL-en.

I denne artikkelen vil vi bare vurdere den tredje.

I URL-parameteren trenger vi ganske enkelt å sende en streng som vil bli erstattet i URL-en fra roten til nettstedet.

La oss legge til en URL

URL-en vår i seg selv vil sannsynligvis være den enkleste: http://localhost/

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

Etter å ha kjørt dette skriptet vil du se i adresselinjen: localhost/catalog/?login=myLogin&page=phone

Men vær forsiktig. Siden vår URL har endret seg. Så når du klikker på oppdater siden, vil nettleseren prøve å gå til den nye URL-en. Og hvis nettstedet ditt ikke har en /catalog/-seksjon, vil du se en 404-feil.

La oss endre den eksisterende URL-en

Det andre eksemplet vil gå her: localhost/catalog/samsung/?login=myLogin&page=phone

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

Linje 1: Få banen i forhold til verten og bruk splitt for å dele den inn i en matrise
Linje 2: Vi oppretter en ny URL som består av ordet "bazar" + den andre nøkkelen i arrayet vårt, som inneholder ordet samsung, og på slutten la vi til vår get
Linje 3: Egentlig selve erstatningen.

Etter å ha utført dette skriptet, vil du se i adressefeltet: localhost/bazar/samsung/?login=myLogin&page=phone

Endre GET-parametere

La oss se på det samme eksempelet.

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("", "", nyUrl);

Selvfølgelig dette manuset er en demonstrasjon og sannsynligvis den enkleste. Etter utførelse vil verdiene i adressefeltet til nettleseren byttes GET parametere. ?login=myLogin&page=phone vil endres til ?login=phone&page=myLogin. Vel, nå, i rekkefølge.

  • linje: Vi får en rekke delte GET-parametere ved å bruke &-symbolet
  • linje: Siden window.location.searche returnerer parametere sammen med separatoren - ?, fjerner vi den.
  • linje: Lag en matrise
  • linje: La oss gå gjennom arrayet vårt
  • linje: Del verdien på nøklene.
  • linje: Samling ny linje med parametere.
    Sikkert denne gjenstanden Det kunne vært gjort annerledes, men innenfor rammen av timen vil vi gjøre det på enkleste måte.
  • linje: Samler inn en ny URL
  • linje erstatt url

    • Etter å ha kjørt skriptet, vår gamle URL: localhost/catalog/samsung/?login=myLogin&page=phone
    vil bli erstattet med en ny: localhost/catalog/samsung/?login=phone&page=myLogin

    Egentlig var det alt jeg ville fortelle deg i dag. Legg igjen kommentarer og ikke glem å dele dette innlegget på sosiale nettverk.

    Moderne nettressurser gir ikke bare informasjon til besøkende, men samhandler også med ham. For å samhandle med brukeren, må du motta noe informasjon fra ham. Det finnes flere metoder for å hente data, svært vanlige metoder er GET og POST. Og følgelig har PHP støtte for disse dataoverføringsmetodene GET og POST. La oss se hvordan disse metodene fungerer.
    GET-metode Data overføres ved å bruke GET-metoden ved å legge dem til URL-en til et skript som kalles for å behandle den mottatte informasjonen. For avklaring denne metoden Skriv inn URL-en til ressursen i nettleserens adresselinje og legg først til et spørsmålstegn (?) og deretter linjen num=10. For eksempel

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


    Hvis du har lokal server da vil vanligvis domenet være localhost, og den forrige oppføringen ser slik ut

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


    I dette tilfellet sender vi parameteren num lik 10. For å legge til følgende parametere Skriptet må for eksempel bruke og-tegnet (&).

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


    I i dette tilfellet vi sendte tre parametere til skriptet: num med verdien 10, skriv med verdien "ny" og v med verdien "tekst".
    For å få disse parameterne i skriptet, må du bruke den innebygde matrisen $_GET $_GET["num"], $_GET["type"],$_GET["v"] . Disse matriseelementene vil inneholde verdiene til de beståtte parameterne. For å demonstrere dette eksemplet, lag en script.php-fil med følgende innhold



    Undersøkelse GET metoden i PHP





    Og nå kall denne filen i nettleseren

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


    og du vil se de beståtte parameterne i nettleservinduet. Men hvis du kaller denne filen uten tilleggsparametere http://path/script.php , vil du se feilene som det vil gi PHP tolk, at det ikke finnes slike elementer i $_GET-matrisen. Mer enn én artikkel kan vies til å sjekke dataene mottatt fra brukeren, så i denne artikkelen vil jeg ikke berøre dette punktet.
    Som du sikkert forstår, er det ikke veldig bra å tvinge brukeren til å skrive inn data i adressefeltet til nettleseren, og det er helt upraktisk. Derfor, for å motta data fra brukeren, må du bruke html-skjemaer. La oss skrive et enkelt html-skjema.


    Skriv inn nummeret

    Har du en PC?
    Ja
    Nei


    Din kommentar:





    La meg kommentere litt på det opprettede skjemaet. Skjemaer opprettes med form-taggen. Skjemafelt opprettes ved hjelp av input, select, textarea tags (du kan lese mer). I skjemataggen spesifiserer handlingsattributtet URL-en til skriptet som skal motta skjemadataene. I vårt tilfelle spesifiserte vi vår eksisterende script.php-fil. Metodeattributtet spesifiserer metoden for å sende data. Vi spesifiserte GET-metoden. Nå vet vi hvilken fil skjemadataene skal overføres til, og på hvilken måte gjenstår det bare å finne ut hvor vi skal lete etter dem?!
    Disse skjemadataene sendes til nettressursen av nettleseren ved å legge dem til URL-en: først vil det være et spørsmålstegn (?), deretter vil parametrene bli presentert atskilt med et og-tegn (&). Navnet på parameteren vil bli hentet fra name-attributtet, som må spesifiseres for ethvert skjemafelt. Verdien av parameteren vil avhenge av felttypen. Hvis feltet er et tekstfelt, vil verdien være teksten som er skrevet inn av brukeren. Hvis feltet er en liste, en gruppe radioknapper eller avmerkingsbokser, vil verdien til parameteren være verdien til verdiattributtet til det valgte elementet. La meg forklare ved å bruke skjemaet vårt som et eksempel. Hvis brukeren skriver inn tallet 10 i inntastingsfeltet, vil navnet på parameteren være num (verdien av navneattributtet til input-taggen) og verdien vil være 10 (tallet angitt av brukeren). Følgelig vil nettleseren generere et par "num=10". Hvis brukeren velger "Ja" fra listen, vil navnet på parameteren være type (verdien til navnattributtet velg tag), og verdien vil være ja (verdiattributtverdien til opsjonskoden). Følgelig vil nettleseren generere et "type=ja"-par.
    Nå vil vi plassere dette skjemaet på forma.php-siden.



    Skjema for overføring av data ved hjelp av GET- og PHP-metoder



    Skriv inn nummeret

    Har du en PC?
    Ja
    Nei


    Din kommentar:







    Skriv inn eventuelle verdier i skjemafeltene og klikk på "Send"-knappen. Etter å ha klikket på knappen vil nettleseren åpne en annen side (script.php) og dataene du skrev inn vil vises i nettleservinduet. Jeg tror det er klart hvorfor: nettleseren sender dataene til script.php-skriptet, og i skriptet vil disse dataene bli behandlet og vist på skjermen.
    POST-metoden La oss nå se på hvordan POST-metoden fungerer.
    For å sende data ved hjelp av POST-metoden, må du bruke HTML-skjemaer. Som vi husker, er metodeattributtet til skjemataggen ansvarlig for metoden for å sende skjemadata. Derfor må du spesifisere verdien POST i metodeattributtet til form-taggen. Ellers kan skjemaet være det samme som for GET-metoden. La oss endre skjemaet vårt, som vi allerede har brukt til å overføre data ved hjelp av GET-metoden, til å overføre ved hjelp av POST-metoden.


    Skriv inn nummeret

    Har du en PC?
    Ja
    Nei


    Din kommentar:





    Som du kan se, forblir skjemaet det samme bortsett fra metode- og handlingsattributtene. Dataene vil nå bli sendt til script_post.php-skriptet. La oss legge skjemaet vårt på siden forma_post.php.



    Skjema for overføring av data ved hjelp av POST- og PHP-metoder



    Skriv inn nummeret

    Har du en PC?
    Ja
    Nei


    Din kommentar:







    Nå må vi skrive et skript som skal behandle skjemadataene våre.
    For å motta data fra POST-metoden i et skript, må du bruke den innebygde $_POST-matrisen. Nøklene til denne matrisen vil være navnene på parameterne. I vårt tilfelle må vi bruke $_POST["num"], $_POST["type"],$_POST["v"] . Disse matriseelementene vil inneholde verdiene til de overførte dataene. Som du kan se, er forskjellen fra å bruke GET-metoden kun uttrykt i bruken av $_POST-matrisen. Derfor vil det ikke være vanskelig for oss å skrive script_post.php-filen:



    Validering av POST-metoden i PHP





    Åpne nå forma_post.php-filen i nettleseren din. Skriv inn noen data i skjemafeltene og klikk på "Send"-knappen. Nå har du sannsynligvis lagt merke til forskjellen mellom POST-metoden og GET-metoden - skjemadataene dukket ikke opp i adressefeltet til nettleseren. Data kan ikke sendes med POST-metoden via nettleserens adresselinje. Dette er en betydelig forskjell å huske.
    I PHP, uavhengig av hvordan dataene ble sendt - POST-metoden eller GET-metoden - kan du få dataene ved å bruke $_REQUEST-matrisen Sammenligning av GET- og POST-metodene Når du bruker GET-metoden, overføres data ved å legge til. URL. Dermed vil de være synlige for brukeren, noe som ikke alltid er bra ut fra et sikkerhetssynspunkt. Den maksimale mengden data som overføres vil også avhenge av nettleseren - av maksimalt tillatt antall tegn i nettleserens adresselinje.
    Ved bruk av POST-metoden vil ikke dataene være synlige for brukeren (vises ikke i nettleserens adresselinje). Og derfor er de sikrere, og følgelig er programmet som behandler disse dataene mer beskyttet når det gjelder sikkerhet. Dessuten er volumet av overførte data praktisk talt ubegrenset.
    Når du velger en dataoverføringsmetode, må du ta hensyn til funksjonene ovenfor og velge den mest passende metoden.