URL Search Parameters

@Work1

Over

Waarom

Stel, je hebt een webwinkel met verschillende producten. Met wat jullie nu weten, moet je dan een pagina per product maken: 

  • product-1.html
  • product-2.html
  • ...
  • product-504.html

Waarom

Het zou gemakkelijker zijn moest je één pagina product.html kunnen maken en op een bepaalde manier kunnen meegeven over welk product het gaat

Dat kan!

De browser laat ons toe om bij elke url extra data mee te geven, ZONDER dat de pagina onvindbaar is, bv:

https://www.facebook.com/search/top/?q=michael

Doel

  • Extra dynamische info meegeven met een pagina
  • Informatie (keuzes) bijhouden op een pagina die via url aanspreekbaar zijn (bv. filters webshop die al juist staan)

Synoniemen

  • Search Parameters
  • Query Parameters
  • GET Parameters

Formaat

index.html?name=value

  • Toevoegen aan url
  • Start altijd met ? teken
  • Gevolgd door een eigen gekozen name en waarde (value)

Voorbeeld

index.html?amount=10

         → amount (name) = 10 (value)

Verschillende

index.html?name1=value&name2=value

bv. index.html?amount=10&type=small

         → amount (name) = 10 (value)
         → type (name) = small (value)

  • meerdere waarden door gebruik te maken van een ampersand (&)

Dubbele

index.html?name=value&name=value

bv. index.html?type=medium&type=small

           → type = ['medium', 'small']

  • meerdere waarden voor zelfde name perfect mogelijk

Inlezen met JavaScript

Search Params inlezen

  • Inlezen via window.location.search
  • Dit geeft een string (= "query string") terug, inclusief ?-teken
// Huidige URL is index.html?amount=10&size=medium

const query = window.location.search;

console.log(query);
// zal "?amount=10&size=medium" printen in console

Waarom omzetten

  • We hebben nu de search parameters in een query string. Om nu te weten wat de waarde is van "amount" moeten we deze string omzetten naar een object
  • We zouden dit zelf kunnen doen ahv standaard JavaScript string methodes, maar dat is omslachtig

URLSearchParams

  • Om de query string te gebruiken is URLSearchParams uitgevonden
// verdergaand op het vorige stuk code met ?amount=10&size=medium
const params = new URLSearchParams(query);

console.log(params.has('amount')); // true
console.log(params.has('size')); // true
console.log(params.has('ietsanders')); // false

console.log(params.get('amount')); // '10'
console.log(params.get('size')); // 'medium'
console.log(params.get('ietsanders')); // null
  • Merk op dat 10 een string is, geen number

URLSearchParams

  • getAll om parameters met zelfde name in te lezen
// bv. index.html?size=medium&size=large&amount=10
// 
const params = new URLSearchParams(window.location.search);

console.log(params.getAll('size')); // ['medium', 'large'] (array)
console.log(params.getAll('amount')); // ['10'] (array)
console.log(params.get('amount')); // '10'

Zelf creëren met JavaScript

Standaard

  • We kunnen het zelf opstellen met JS
  • Enkel mogelijk voor simpele scenario's
const value = "medium";

// gebruiken in url -> zelf ? toevoegen!
const url = '/index.html?size=' + value;

URLSearchParameters

  • Met URLSearchParameters kunnen we ook zelf een query string maken
// we starten met een leeg URLSearchParams object
const params = new URLSearchParams(); 

// voeg type toe
params.append('size', 'medium');
params.append('amount', '2');

// omzetten naar query string
const query = params.toString(); // type=medium&size=2

// gebruiken in url -> zelf ? toevoegen!
const url = '/index.html?' + query;

Meer methodes

  • https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Made with Slides.com