如何将带有多个参数的URL传递到另一个URL中？

Question

基本上我正在尝试传递这样的URL：

www.foobar.com/?first=1&second=12&third=5

将其转换为以下格式的URL：

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http://www.foobar.com/first=12&sec=25&position=2

它只识别第一个参数。我在使用LinkedIn和Twitter分享时也遇到了同样的问题，所以一定是我做错了什么。

- DormoTheNord

Answer 1

与其对URL参数进行HTML编码，你需要对其进行URL编码：

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D

大多数编程语言都可以轻松实现此操作 - 在 JavaScript 中：

var encodedParam = encodeURIComponent('www.foobar.com/?first=1&second=12&third=5');
// encodedParam = 'http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D'

（其他语言中也有相应的方法）

- Dexter

---

如果查询字符串中包含奇怪的字符，您是否需要对每个参数进行编码？ - Kevin Ghadyani

在我的回答中，我假设在对URL进行编码以作为参数传递之前，该值已经是有效的/正确构造的。即使URL无效，上述方法也可以正常工作-但是如果它不是有效的，则您可能无法在另一端有效地使用它。 - Dexter

Answer 2

你在第二个URL中缺少?（此外，它应该进行URL编码以成为%3F）。

此外，我认为剩余的&需要进行URL编码，而不是HTML编码。将&second=12&third=5更改为%26second=12%26third=5，一切都应该正常工作。

这样做：

&u=http://www.foobar.com/first=12&sec=25&position=2

应该是：

&u=http://www.foobar.com/%3Ffirst=12%26sec=25%26position=2

- Sean Vieira

---

可能还需要对 URL 中的冒号和斜杠进行编码。 - justkt

@DormoTheNord -- %31 是一个错误...应该是 %3F。 - Sean Vieira

@Ferdinand - 我认为你想要使用encodeURIComponent，它可以编码所有的URL字符。encodeURI不会编码像:和/这样的字符。 - justkt

抱歉，那是个打错字。我正在使用encodeURIComponent。 - DormoTheNord

@justktпјҡжҳҜзҡ„пјҢдҪ иҜҙеҫ—еҜ№гҖӮе®һйҷ…дёҠпјҢжҲ‘жҳҜжҢҮescape()иҖҢдёҚжҳҜencode()пјҢдҪҶencodeURIComponent()еҸҜиғҪжӣҙеҘҪгҖӮ - Ferdinand Beyer

Answer 3

在jQuery中，你可以使用：

let myObject = {first:1, second:12, third:5};
jQuery.param(myObject);

文档: http://api.jquery.com/jquery.param/ 输出结果: first=1&second=12&third=5 此函数可以格式化任何对象的内容。

- SSL46

Answer 4

在你的示例中，传入的URL的部分未进行URL编码（例如冒号应该是%3A，正斜杠应该是%2F）。看起来你已经对参数URL进行了编码，但没有对参数URL本身进行编码。尝试对其进行编码。你可以使用encodeURIComponent。

- justkt

Answer 5

我看到你在社交分享链接方面遇到了问题。我曾经也遇到过类似的问题，找到了这个问题，但是我没有看到完整的答案。 希望下面我的javascript解决方案能够帮到你：

我有一些默认的分享链接需要修改，以便将要分享的URL连接附加额外的UTM参数。

我的示例将用于Facebook社交分享链接，但适用于所有可能的社交分享网络链接：

需要分享的URL是：

https://mywebsitesite.com/blog/post-name

默认的共享链接如下：

$facebook_default = "https://www.facebook.com/sharer.php?u=https%3A%2F%2mywebsitesite.com%2Fblog%2Fpost-name%2F&t=hello"

我首先对它进行了解码：

console.log( decodeURIComponent($facebook_default) );
=>
https://www.facebook.com/sharer.php?u=https://mywebsitesite.com/blog/post-name/&t=hello

然后我用编码后的新URL（包含UTM参数）替换了原来的URL：

console.log( decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

=>

https://www.facebook.com/sharer.php?u=https%3A%2F%mywebsitesite.com%2Fblog%2Fpost-name%2F%3Futm_medium%3Dsocial%26utm_source%3Dfacebook&t=2018

就是这样！

完整解决方案：

$facebook_default = $('a.facebook_default_link').attr('href');

$('a.facebook_default_link').attr( 'href', decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

- TheoPlatica

Answer 6

使用JavaScript构建传递搜索参数的URL

构建不带参数的URL

const apiEndPoint = new URL('https://geocode.maps.co/reverse');

以对象形式组织参数

const parameters = {
    lat: 52.508,
    lon: 13.381
}

从对象构建搜索参数

const searchParams = new URLSearchParams(parameters)

将搜索参数添加到URL

apiEndPoint.search = searchParams

最终网址

const finalURL = apiEndPoint.toString()

在控制台上打印完成的URL

console.log(finalURL)

[日志] https://geocode.maps.co/reverse?lat=52.508&lon=13.381

- TABISH

Answer 7

你必须转义 & 字符。调整你的

&

进入

&

你应该没问题了。

- jonezy

---

Web服务器不知道HTML实体，字符必须进行URI编码。 - Ferdinand Beyer

我尝试了 &s; 但没有成功。我需要 %31。现在，我只是使用JavaScript的 encode()函数。 ^_^ - DormoTheNord

该实体被称为&，而不是&s; -- 他将其复数化以适应英语的目的。;) 我进行了编辑以使其更清晰。但%31更好。 - Scott Stafford

实际上，应该使用%26来转义&。 - Ahmed Azraq

也许是时候删除这个答案了 :) - Jose Manuel Abarca Rodríguez