วิธีเข้ารหัสพารามิเตอร์ 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);

สาธิต: 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 ธรรมชาติไม่บ่อย)