Jak zakodować parametry adresu URL?

Próbuję przekazać parametry do adresu URL, który wygląda następująco:

http://www.foobar.com/foo?imageurl=

Chcę przekazać parametry, takie jak adres URL obrazu, który jest generowany sam przez inny interfejs API, a link do obrazu wygląda następująco:

http://www.image.com/?username=unknown&password=unknown

Jednak gdy próbuję użyć adresu URL:

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

To nie działa.

Próbowałem też użyć encodeURI()i encodeURIComponent()na imageURL, ale to też nie działa.

Dzięki PHP

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

Wynik

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

Z JavaScriptem:

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

DEMO: http://jsfiddle.net/Lpv53/

Używając nowego ES6 Object.entries(), sprawia to przyjemność trochę zagnieżdżone map/ join:

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

Nie powinieneś używać encodeURIComponent()ani encodeURI(). Należy używać fixedEncodeURIComponent()i fixedEncodeURI(), zgodnie z dokumentacją MDN.

Odnośnie encodeURI()...

Jeśli ktoś chce postępować zgodnie z nowszym RFC3986 dla adresów URL, który sprawia, że ​​nawiasy kwadratowe są zarezerwowane (dla IPv6), a tym samym nie są kodowane podczas tworzenia czegoś, co mogłoby być częścią adresu URL (na przykład hosta), może pomóc następujący fragment kodu:

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

Odnośnie encodeURIComponent()...

Aby być bardziej rygorystycznym w przestrzeganiu RFC 3986 (który zastrzega!, ', (,) I *), nawet jeśli te znaki nie mają sformalizowanych zastosowań ograniczających identyfikatory URI, można bezpiecznie użyć następujących elementów:

function fixedEncodeURIComponent(str) { return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charCodeAt(0).toString(16); }); }

Więc jaka jest różnica? fixedEncodeURI()i fixedEncodeURIComponent()przekształcić ten sam zestaw wartości, ale fixedEncodeURIComponent()również przekształca ten zestaw: +@?=:*#;,$&. Ten zestaw jest używany w GETparametrach ( &, +etc.), tagi kotwy ( #), wieloznacznych tagów ( *), części e-mail / nazwa użytkownika ( @), itp ..

Na przykład - jeśli używasz encodeURI(), user@example.com/?email=me@homenie prześle poprawnie drugiej @do serwera, z wyjątkiem twojej przeglądarki obsługującej zgodność (co oczywiście często robi Chrome).