如何对URL参数进行编码?

发布于 2024-12-15 11:21:04 字数 476 浏览 3 评论 0原文

我正在尝试将参数传递给如下所示的 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() ,但这也不起作用。

I am trying to pass parameters to a URL which looks like this:

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

And I want to pass the parameters such as an image URL which is generated itself by another API, and the link for the image turns out as:

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

However, when I try to use the URL:

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

It doesn't work.

I have also tried using encodeURI() and encodeURIComponent() on the imageURL, and that too doesn't work.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

初熏 2024-12-22 11:21:04

使用 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.净/Lpv53/

With PHP

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

Result

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

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

深爱成瘾 2024-12-22 11:21:04

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

Using new ES6 Object.entries(), it makes for a fun little nested 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))

蓝礼 2024-12-22 11:21:04

使用 URLSearchParams

const params = new URLSearchParams()
params.set('imageurl', 'http://www.image.com/?username=unknown&password=unknown')
return `http://www.foobar.com/foo?${params.toString()}`

With URLSearchParams:

const params = new URLSearchParams()
params.set('imageurl', 'http://www.image.com/?username=unknown&password=unknown')
return `http://www.foobar.com/foo?${params.toString()}`
衣神在巴黎 2024-12-22 11:21:04

只需亲自尝试 encodeURI()encodeURIComponent()...

console.log(encodeURIComponent('@#$%^&*'));

输入:@#$%^&*。输出:%40%23%24%25%5E%26*。那么,等等,* 发生了什么?为什么这个没有转换? TLDR:您实际上想要 fixedEncodeURIComponent()fixedEncodeURI()。长话短说...

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

关于encodeURI()...

如果您希望遵循更新的 URL RFC3986,该 RFC3986 保留方括号(用于 IPv6),因此在形成可能属于 URL 一部分的内容(例如主机)时不进行编码,则可以使用以下代码片段帮助:

functionfixedEncodeURI(str) { returnencodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

关于encodeURIComponent()...

为了更严格地遵守 RFC 3986(保留 !、'、(、) 和 *),即使这些字符没有正式的 URI 分隔用途,也可以安全地使用以下字符:

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

,有什么区别呢? fixedEncodeURI()fixedEncodeURIComponent() 转换同一组值,但 fixedEncodeURIComponent() 也会转换该组:+@? =:*#;,$&。该集合用于 GET 参数(&+ 等)、锚标记 (#) 、通配符标签 (*)、电子邮件/用户名部分 (@) 等。

例如 -- 如果您使用 encodeURI (), [email protected]/?email=me@home 将无法正常使用将第二个 @ 发送到服务器,除非您的浏览器处理兼容性(Chrome 自然会这样做) 经常)。

Just try encodeURI() and encodeURIComponent() yourself...

console.log(encodeURIComponent('@#$%^&*'));

Input: @#$%^&*. Output: %40%23%24%25%5E%26*. So, wait, what happened to *? Why wasn't this converted? TLDR: You actually want fixedEncodeURIComponent() and fixedEncodeURI(). Long-story...

You should not be using encodeURIComponent() or encodeURI(). You should use fixedEncodeURIComponent() and fixedEncodeURI(), according to the MDN Documentation.

Regarding encodeURI()...

If one wishes to follow the more recent RFC3986 for URLs, which makes square brackets reserved (for IPv6) and thus not encoded when forming something which could be part of a URL (such as a host), the following code snippet may help:

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

Regarding encodeURIComponent()...

To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:

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

So, what is the difference? fixedEncodeURI() and fixedEncodeURIComponent() convert the same set of values, but fixedEncodeURIComponent() also converts this set: +@?=:*#;,$&. This set is used in GET parameters (&, +, etc.), anchor tags (#), wildcard tags (*), email/username parts (@), etc..

For example -- If you use encodeURI(), [email protected]/?email=me@home will not properly send the second @ to the server, except for your browser handling the compatibility (as Chrome naturally does often).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文