Як кодувати параметри URL-адреси?

Я намагаюся передати параметри до URL-адреси, яка виглядає приблизно так:

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

І я хочу передати такі параметри, як URL-адреса зображення, яка генерується самим іншим API, і посилання на зображення виходить таким:

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

Однак, коли я намагаюся використовувати URL:

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

Це не працює.

Я також спробував використовувати encodeURI()і encodeURIComponent()на imageURL, і це теж не працює.

З PHP

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

Результат

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

За допомогою 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/

Використовуючи новий ES6 Object.entries(), він дає можливість весело вкластись 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))

Ви не повинні використовувати encodeURIComponent()або encodeURI(). Ви повинні використовувати fixedEncodeURIComponent()і fixedEncodeURI(), згідно з документацією MDN.

Щодо encodeURI()...

Якщо ви хочете слідкувати за останніми RFC3986 для URL-адрес, що робить квадратні дужки зарезервованими (для IPv6) і, таким чином, не кодується, формуючи щось, що може бути частиною URL-адреси (наприклад, хост), може допомогти наступний фрагмент коду:

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

Щодо encodeURIComponent()...

Щоб бути більш суворим у дотриманні RFC 3986 (який резервує!, ', (,) І *), хоча ці символи не мають формалізованого використання URI, що обмежує використання, можна безпечно використовувати наступне:

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

Отже, у чому різниця? fixedEncodeURI()і fixedEncodeURIComponent()перетворити той же набір значень, але fixedEncodeURIComponent()і перетворює цей набір: +@?=:*#;,$&. Цей набір використовується в GETпараметрах ( &, +тощо), тегах прив’язки ( #), тегах підстановки ( *), частинах електронної пошти / імені користувача ( @) та ін.

Наприклад - якщо ви користуєтесь encodeURI(), user@example.com/?email=me@homeне буде належним чином надсилати другий @на сервер, за винятком того, що ваш браузер обробляє сумісність (як це звичайно робить Chrome).