How to encode URL parameters?

Question

I am trying to pass parameters to a URL which looks like this:

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

and I want to pass the parameters suchas and image URL which is generated itself by another API, and the link for the image turns out as:

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

However, when I try to use the URL:

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

it doesn't work..

I have also tried using encodeURI and encodeURIComponents on the imageURL, and that too doesn't work.

Answer 1

With PHP

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

Result

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

With Javascript:

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/

Answer 2

Using new ES6 Object.entries(), it makes for a fun little nested 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))