Làm cách nào để mã hóa các tham số URL?

Tôi đang cố gắng chuyển các tham số đến một URL giống như sau:

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

Và tôi muốn chuyển các tham số như URL hình ảnh được tạo bởi một API khác và liên kết cho hình ảnh xuất hiện như sau:

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

Tuy nhiên, khi tôi cố gắng sử dụng URL:

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

Nó không hoạt động.

Tôi cũng đã thử sử dụng encodeURI()và encodeURIComponent()trên imageURL, nhưng điều đó cũng không hoạt động.

Với PHP

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

Kết quả

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

Với 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/

Sử dụng ES6 mới Object.entries(), nó tạo ra một chút thú vị lồng vào nhau 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))

Bạn không nên sử dụng encodeURIComponent()hoặc encodeURI(). Bạn nên sử dụng fixedEncodeURIComponent()và fixedEncodeURI()theo Tài liệu MDN.

Về encodeURI()...

Nếu một người muốn làm theo RFC3986 mới hơn cho URL, tạo dấu ngoặc vuông dành riêng (cho IPv6) và do đó không được mã hóa khi tạo thứ gì đó có thể là một phần của URL (chẳng hạn như máy chủ), đoạn mã sau có thể giúp:

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

Về encodeURIComponent()...

Để tuân thủ nghiêm ngặt hơn RFC 3986 (dự trữ!, ', (,) Và *), ngay cả khi các ký tự này không có công dụng phân định URI chính thức, bạn có thể sử dụng những điều sau một cách an toàn:

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

Vì vậy, sự khác biệt là gì? fixedEncodeURI()và fixedEncodeURIComponent()chuyển đổi cùng một tập hợp các giá trị, nhưng fixedEncodeURIComponent()cũng chuyển đổi nhóm này: +@?=:*#;,$&. Tập hợp này được sử dụng trong GETcác tham số ( &, +v.v.), thẻ liên kết ( #), thẻ ký tự đại diện ( *), phần email / tên người dùng ( @), v.v.

Ví dụ: - Nếu bạn sử dụng encodeURI(), user@example.com/?email=me@homesẽ không gửi đúng cách thứ hai @đến máy chủ, ngoại trừ trình duyệt của bạn xử lý khả năng tương thích (như Chrome thường làm thường xuyên).