JSON

Query String

Co robi JSON do Query String?

Zbudowałeś w kodzie konfigurację JSON — parametry filtrów, payload analityczny, OAuth state — i teraz musisz to dokleić do URL-a. Ta strona załatwia ten nudny ostatni odcinek. Wklej JSON po lewej, dostaniesz ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified po prawej, gotowe do wrzucenia w link, wywołanie fetch albo URL webhooka. Tablice rozwijają się w powtórzone klucze (konwencja, którą rozumie każdy współczesny serwer), wartości są poprawnie kodowane procentowo, a początkowe ? jest dołączane, więc możesz wkleić wprost do URL-a.

Konwersja korzysta z wbudowanego w przeglądarkę URLSearchParams — tej samej prymitywy, której twój framework serwerowy używa do parsowania powracającego żądania. URLSearchParams generuje wyjście application/x-www-form-urlencoded zgodnie z URL Standardem WHATWG, a JSON parsowany jest przez JSON.parse zgodnie z RFC 8259. Liczby i wartości boolean są rzutowane na stringi (query stringi nie mają systemu typów), wartości null i undefined są pomijane, a zagnieżdżone obiekty rzucają zrozumiały błąd, żeby można je było spłaszczyć.

Wszystko działa lokalnie w twojej przeglądarce — żadnego uploadu, żadnej rundy do serwera, żadnego logowania. Jeśli masz odwrotny problem (query string i chcesz JSON), użyj Query String do JSON. Jeśli chcesz rozłożyć cały URL na protokół, host, ścieżkę i część search, lepiej pasują strona URL do JSON albo URL Parser. Reguły kodowania procentowego, które tu działają, są określone w RFC 3986 §2.1, a szerszy model parsowania URL znajdziesz w referencji MDN URL API.

Jak skonwertować JSON na query string

Trzy kroki. Każdy odpowiada przyciskowi na stronie.

Wklej obiekt JSON

Wrzuć JSON do lewego panelu. Wartość najwyższego poziomu musi być obiektem — tablice i wartości proste nie mapują się czysto na parametry query. Kliknij Przykład, żeby załadować realistyczny payload filtra e-commerce ze stringiem, liczbą, kluczem w nawiasach kwadratowych i tablicą. Przykład:

{
  "customer": "Ava Chen",
  "status": "active",
  "total[gte]": "49.99",
  "page": 2,
  "tag": ["premium", "verified"]
}

Liczby i wartości boolean są rzutowane na stringi (query stringi nie niosą typów). Wartości <code>null</code> i <code>undefined</code> są pomijane — w przeciwnym razie tylko zaśmiecałyby URL.

Czytaj query string

Prawy panel aktualizuje się w trakcie pisania. Powyższy przykład produkuje ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Spacje stają się + (styl form-encoded — patrz FAQ), nawiasy kwadratowe stają się %5B/%5D, a tablica tag rozwija się w dwa osobne parametry tag=.

Skopiuj albo pobierz

Kliknij Kopiuj, żeby wysłać query string do schowka, albo Pobierz, żeby zapisać go jako querystring.txt. Wyczyść resetuje panel wejściowy.

Kiedy faktycznie tego użyjesz

Budowanie URL-i filtrów do udostępniania

Twój dashboard pozwala użytkownikowi filtrować zamówienia po kliencie, statusie i zakresie dat. Stan żyje jako obiekt JSON w komponencie ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). Żeby widok dało się udostępnić, doklejasz to do URL-a — wklej tu JSON, skopiuj query string, gotowe. To samo dotyczy stron kategorii w e-commerce, wyników wyszukiwania, wszystkiego z filtrami trzymającymi stan.

Składanie URL-i callback dla webhooków

Stripe, GitHub i większość nadawców webhooków pozwala umieścić metadane w query stringu URL-a callbacku. Masz obiekt JSON opisujący użytkownika ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) i musisz go dokleić do https://api.example.com/webhook?.... Wklej, skopiuj, wklej — znacznie lepsze niż URL-encodowanie każdej wartości ręcznie i zastanawianie się, które znaki trzeba escapować.

Generowanie URL-i OAuth i OpenID

URL-e autoryzacji OAuth to 8–12 parametrów query: client_id, redirect_uri, scope, state, response_type itd. Zbudowanie tego najpierw w JSON-ie (żeby zobaczyć przejrzyście) i konwersja tutaj jest szybsza niż łączenie stringów i modlenie się, że kodowanie wyszło dobrze. Parametr state często niesie nonce i ścieżkę powrotu, które potrzebują własnego escapowania.

Składanie żądań API w klientach HTTP

Kiedy testujesz endpoint API w cURL-u, Postmanie albo szybkim fetch(), zwykle masz parametry jako fragment JSON-a z dokumentacji. Skonwertuj tutaj, doklej do URL-a, wystrzel żądanie. Filtr produktów dla zamówienia ORD-1001 {"sku": "SKU-101", "include": "variants"} staje się ?sku=SKU-101&include=variants w jednym wklejeniu.

Częste pytania

Dlaczego spacje są kodowane jako + zamiast %20?

Bo wyjście jest form-encoded (application/x-www-form-urlencoded) — to jest to, co wysyła każda przeglądarka i czego oczekuje każdy serwer w query stringu. Technicznie RFC 3986 woli %20 w komponentach URI, ale konwencja form-encoded ze spacją jako + jest starsza niż RFC 3986 i jest tym, czego query stringi używają od lat 90. Każdy współczesny framework serwerowy dekoduje obie wersje — Express, FastAPI, ASP.NET, Spring, Rails, Django, cokolwiek. Jeśli koniecznie potrzebujesz %20, puść po wyjściu szybkie .replace(/\+/g, "%20").

Jak kodowane są tablice?

Rozwijają się w powtórzone klucze. {"tag": ["premium", "verified"]} staje się tag=premium&tag=verified. To konwencja, którą produkuje URLSearchParams, i przepuszcza się ją czysto przez URLSearchParams.getAll() po stronie odbierającej. Jeśli twój serwer oczekuje notacji nawiasowej (tag[]=premium&tag[]=verified — częste w PHP i Rails), nazwij klucz JSON-a tag[] zamiast tag.

Czy mogę mieć zagnieżdżone obiekty w JSON-ie?

Nie — query stringi są płaskie z założenia. Strona zwraca zrozumiały błąd, gdy widzi zagnieżdżony obiekt, żebyś mógł go spłaszczyć. Najczęstszy obejście to klucze z notacją nawiasową: zamiast {"filter": {"status": "active"}} napisz {"filter[status]": "active"}. Frameworki jak Rails, PHP i qs.js parsują to z powrotem do zagnieżdżonych obiektów po stronie serwera. Albo po prostu spłaszcz to koncepcyjnie: {"status": "active"}, jeśli nie ma realnej wieloznaczności.

Co dzieje się z wartościami null i undefined?

Są pomijane. {"customer": "Ava Chen", "status": null} daje ?customer=Ava+Chen, nie ?customer=Ava+Chen&status=. Uzasadnienie: status= w URL-u znaczy "pusty string", to jest realna wartość i co innego niż "brak statusu". Wysyłanie null jako pustego byłoby stratne i mylące. Jeśli naprawdę chcesz status=, wyślij {"status": ""}.

Czy liczby i wartości boolean zachowują typy?

Nie — query stringi niosą tylko stringi. {"page": 2} staje się page=2, a {"debug": true} staje się debug=true. Twój kod po stronie serwera musi znać schemat i z powrotem rzutować typy. To jest wpisane w naturę query stringów (i danych formularzy) — format na łączu nie zna różnicy między liczbą 2 a stringiem "2". Jeśli potrzebujesz typowanych parametrów, wyślij je w ciele żądania jako JSON.

Jak radzi sobie z Unicode i emoji w kluczach albo wartościach?

Czysto. URLSearchParams koduje bajty jako UTF-8 i robi percent-escape wszystkiego poza bezpiecznym zestawem. Więc {"name": "中文"} staje się name=%E4%B8%AD%E6%96%87, a {"reaction": "🔥"} staje się reaction=%F0%9F%94%A5. Po stronie odbierającej URLSearchParams (albo parser query któregokolwiek frameworka) dekoduje to z powrotem. Nie ma żadnego ustawienia kodowania do podkręcania — UTF-8 to to, co narzuca URL Standard.

Po co to początkowe pytanie?

Żebyś mógł wkleić wynik bezpośrednio na URL — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = działający URL. Jeśli doklejasz do URL-a, który już ma query string, wywal ? i użyj &. Jeśli wejście jest puste albo to {}, wynik też jest pusty (żadnego samotnego ?).

Inne narzędzia URL i JSON

Zbudowanie query stringa to jedna operacja. Oto co dobrze się z tym łączy: