Bagaimana cara menyandikan parameter URL?

Saya mencoba meneruskan parameter ke URL yang terlihat seperti ini:

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

Dan saya ingin meneruskan parameter seperti URL gambar yang dihasilkan sendiri oleh API lain, dan tautan untuk gambar tersebut ternyata:

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

Namun, ketika saya mencoba menggunakan URL:

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

Ini tidak berhasil.

Saya juga mencoba menggunakan encodeURI()dan encodeURIComponent()pada imageURL, dan itu juga tidak berhasil.

Dengan PHP

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

Hasil

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

Dengan 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/

Menggunakan ES6 baru Object.entries(), itu membuat sedikit bersarang 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))

Anda tidak boleh menggunakan encodeURIComponent()atau encodeURI(). Anda harus menggunakan fixedEncodeURIComponent()dan fixedEncodeURI(), menurut Dokumentasi MDN.

Mengenai encodeURI()...

Jika seseorang ingin mengikuti RFC3986 yang lebih baru untuk URL, yang membuat tanda kurung siku dicadangkan (untuk IPv6) dan dengan demikian tidak dikodekan saat membentuk sesuatu yang bisa menjadi bagian dari URL (seperti host), cuplikan kode berikut dapat membantu:

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

Mengenai encodeURIComponent()...

Agar lebih ketat dalam mematuhi RFC 3986 (yang menyimpan!, ', (,), Dan *), meskipun karakter ini tidak memiliki penggunaan pembatas URI yang diformalkan, berikut ini dapat digunakan dengan aman:

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

Lalu apa bedanya? fixedEncodeURI()dan fixedEncodeURIComponent()mengkonversi set yang sama nilai-nilai, tetapi fixedEncodeURIComponent()juga mengubah set ini: +@?=:*#;,$&. Set ini digunakan dalam GETparameter ( &,, +dll.), Tag anchor ( #), tag wildcard ( *), bagian email / nama pengguna ( @), dll.

Misalnya - Jika Anda menggunakan encodeURI(), [email protected]/?email=me@hometidak akan mengirim yang kedua dengan benar @ke server, kecuali untuk browser Anda yang menangani kompatibilitas (seperti yang biasanya dilakukan Chrome).