Variable in URL

Posted in : Javascript, Websites on by : Bob van Leeuwen Comments: 0

Net als bij multidimensionale arrays heeft Javascript niet echt ondersteuning voor variable in URL’s zoals PHP dat heeft. Ook omdat je het niet echt nodig heb. Omdat ik het toch nodig had moest er een omweg komen. En samen met een paar klas genoten zijn we op het volgende gekomen.

Javascript heeft de string functie split. Dit kan je bijvoorbeeld op een zijn gebruiken. Als je deze zin door de split functie heen zou halen op de spaties krijg je de volgende array:

"Als", "je", "deze", "zin", "door", "de", "split", "functie", "heen", "zou", "halen", "krijg", "je", "de", "volgende", "array:"

Je kan de split ook op woorden draaien, als we hen de volgende zin nu op functie laten splitten krijgen we de volgende array:

"Als je deze zin door de split", "heen zou halen op de spaties krijg je de volgende array"

Zoals je ziet verdwijnt het gedeelte waar je Javascript op laat splitten. Op deze manier kan je dus ook waardes via javascript uit een URL halen.

In dit voorbeeld gaan we er vanuit dat we een forum hebben, en we moeten weten voor een functie welke topic ID we op dit moment weergeven. Voor dit voorbeeld gebruiken we de volgende URL: http://vipercomplex.com/forum/viewtopic.php?f=16&t=1880. Het topic ID word aangegeven in de t var in de URL. Het forum ID staat in de var f.

We splitten eerste de URL op het vraagteken, om het gedeelte waar de waardes in staan los te krijgen van de rest. De volgende code gebruiken we daar voor:

var url = window.location.href.split( '?');

Als je die variable dan nu opvraagt krijg je de volgende array:

["http://vipercomplex.com/forum/viewtopic.php", "f=16&t=1880"]

We willen nu verder gaan werken met het het splitten, want we willen het topic ID over houden. Om dit te doen scheiden we nu het forum ID en het topic ID gedeelte. We doen dit met de volgende code:

var UrlData = url.split("&");

Als we nu deze variable aanroepen krijgen we de volgende array:

["f=16", "t=1880"]

We hebben nu het forum ID en topic ID apart van elkaar gekregen, omdat we alleen het topic ID over willen houden splitten we dit nog op een keer. Omdat het topic ID in de tweede waarden staat van de array zetten we [1] achter de variable naam, om zo deze aan te roepen.

var TopicID = UrlData[1].split('=');

Als je nu de variable TopicID in de console zou laten loggen, krijg je als uitkomst 1880. Let er wel op dat dit nummer een string is, mocht je hem dus verder willen gebruiken met bijvoorbeeld berekeningen moet je hem eerst omzetten naar een float moeten omzetten!

Geef een reactie