Dynamic Query Parameters & URLSearchParams

Building clean URLs with search, pagination, and filter parameters

« Sending POST, PUT & DELETE Requests« Previous FormData & Asynchronous File Uploads »Next »

The URLSearchParams API constructs safely encoded query parameter strings (?page=2&search=python), avoiding fragile manual string concatenation.

Encoding Query Strings Automatically

Avoid manual string concatenation like url + "?search=" + query, which breaks on spaces and special characters (&, #).

new URLSearchParams() handles URI escaping and formatting automatically.

Building Paginated Filter Requests

Try It Yourself »

function searchCatalog(searchTerm, page = 1, category = "all") {
  const url = new URL("https://api.codexia.org/search");
  
  // Append query parameters safely
  url.searchParams.append("query", searchTerm);
  url.searchParams.append("page", page.toString());
  url.searchParams.append("category", category);

  console.log("Constructed URL:", url.toString());
  return fetch(url.toString());
}

// Generates: https://api.codexia.org/search?query=react%2Bhooks&page=1&category=all
searchCatalog("react+hooks", 1, "all");

Encodes spaces and special characters safely.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Why should you use `URLSearchParams` instead of manual string concatenation for query strings?

« Previous: Sending POST, PUT & DELETE Requests Next: FormData & Asynchronous File Uploads »