如何编码URL参数?


123

我正在尝试将参数传递给看起来像这样的URL:

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

我想传递参数,例如由另一个API自身生成的图像URL,图像的链接结果为:

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

但是,当我尝试使用URL时:

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

没用

我也尝试在imageURL上使用encodeURI()encodeURIComponent(),这也行不通。


URL生成哪种语言?JavaScript?
Phil

2
请注意,即使在使用https的情况下,也不要在URL中输入密码,因为客户端和服务器之间的每个路由器都会看到整个URL。
fabb

Answers:


171

使用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/


37

使用新的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))


1

您不应该使用encodeURIComponent()encodeURI()。您应该根据MDN文档使用fixedEncodeURIComponent()fixedEncodeURI()

关于encodeURI()...

如果有人希望遵循最新的URL RFC3986,这使得方括号保留(用于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经常会这样做)。


你是什​​么意思"except for your browser handling the compatibility"
斯蒂芬

@Stephan:例如,如果site.com?formula=a+b=c在production中工作,则formula=>a+b=c违反了规范,但如果可行,那是因为Chrome / etc。可以检测到URL的规范失败等,等等user@site.com?email=user@site.com
HoldOffHunger
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.