在 URL 中为每个元素添加多个查询参数

Question

所以我的应用程序 atm 返回这个 URL 没有参数localhost:3000/website/site1

参数是从 FRONT 组件定义的，例如 params1 的日历模式，例如，我从日期选择器中选择一个日期，它返回给我这个"2022-11-02" ，如果我选择一个带有 end_date 的日期范围，它返回给我这个"2022-06-25"

所以我有localhost:3000/website/site1?start_at=2022-11-02&end_at=2022-06-25

但现在我想添加更多内容

我创建了一个比较网站功能，我可以比较 2 个网站，当我点击这个比较按钮时，我需要更改 URL 并包含比较的网站，所以最后我想要这样的东西

localhost:3000/website/site1?params1&params2 HERE INCLUDE site2 with same pattern as site1

localhost:3000/website/site1?start_at=2022-11-02&end_at=2022-06-25&site2?start_at=2022-11-02&end_at=2022-06-25

我不知道语法是否正确

如果这种语法不起作用，我该如何使它起作用？

而且 ofc 没有参数值（默认情况下没有）它应该返回这个localhost:3000/website/site1&site2

我做了这个

const compare = {
 start_at: format(new Date(dateRange.start_at), "yyyy-MM-dd"),
 end_at: format(new Date(dateRange.end_at), "yyyy-MM-dd"),
 };
 const compared = {
        start_at: format(
        new Date(dateRangeCompare.start_at),
        "yyyy-MM-dd"),
  end_at: format(new Date(dateRangeCompare.end_at), "yyyy-MM-dd"),
};
const s1 = new URLSearchParams(compare).toString();
const s2 = new URLSearchParams(compared).toString();
const url2 = new URL(window.location.origin);
url2.searchParams.append("site1", s1);
url2.searchParams.append("site2", s2);

但它返回给我这个http://localhost:3002/?site1=start_at%3D2022-06-21%26end_at%3D2022-06-21&site2=start_at%3D2022-06-21%26end_at%3D2022-06-21

我试图在 url2 decodeURI(url2)上使用 decodeURI() 但它没有改变任何东西，我试图做 decodeURIcomponent() 但它没有改变任何东西。 我迷路了

TLDR：我希望每个站点（站点 1 和站点 2）在 URL 中都有各自的查询参数，站点 2 需要与站点 1 具有相同的查询模式

谢谢

Answer 1

当需要具有相同名称（类似数组）的查询参数时，请使用参数格式，如： ?a[]=1&a[]=2 。 就像使用具有相同名称的复选框或选择多个类型的复选框一样。

仅限网站：

?site[]=x&site[]=y

有日期的网站：

?site[]=x&site[]=y&start_at[]=x1&end_at[]=x2&start_at[]=y1&end_at[]=y2

唯一需要注意的是遵守顺序：如果您从站点"X"开始，那么第一对开始/结束日期应该是站点"X"的日期。

更具可读性：

?site[]=x
&site[]=y
&start_at[]=x1
&end_at[]=x2
&start_at[]=y1
&end_at[]=y2

另一个具有不同顺序的有效示例：

?site[]=x
&start_at[]=x1
&end_at[]=x2
&site[]=y
&start_at[]=y1
&end_at[]=y2

然后在后端，知道顺序是可预测的，您可以在单个站点长度循环中获取所有变量。

此外，通过使用上述建议，您可以使用 N 个站点及其各自的开始/结束对。

例子：

 // Helper functions: const objectsToFormData = (...objects) => { const FD = new FormData(); objects.forEach(obj => { Object.entries(obj).forEach(([k, v]) => FD.append(k, v)); }); return FD; }; const formDataToQueryString = (FD) => new URLSearchParams(FD).toString(); // Task: const data_1 = { "site[]": location.origin, "start_at[]": "2022-11-02", "end_at[]": "2022-06-25", }; const data_2 = { "site[]": "https://example.com", "start_at[]": "2021-09-20", "end_at[]": "2022-07-13", }; const formData = objectsToFormData(data_1, data_2); const queryString = formDataToQueryString(formData); console.log(queryString);

这会给你这个查询字符串：

site%5B%5D=https%3A%2F%2Fstacksnippets.net&start_at%5B%5D=2022-11-02&end_at%5B%5D=2022-06-25&site%5B%5D=https%3A%2F%2Fexample.com&start_at%5B%5D=2021-09-20&end_at%5B%5D=2022-07-13

如果您只需要站点，完全相同的代码将按预期工作。