将逗号分隔的值作为搜索参数附加到 url [重复]

Posted 2023-02-22

【中文标题】将逗号分隔的值作为搜索参数附加到 url [重复]

【英文标题】：append comma seperated values to url as search params [duplicate]

【发布时间】：2020-02-20 11:37:51

【问题描述】：

如何使用 history.pushsate 将逗号分隔值附加到 url 作为搜索参数。使用 RFC 3986 指定 URI 路径组件不应包含未编码的保留字符，逗号是这些保留字符之一。 https://www.rfc-editor.org/rfc/rfc3986.

#代码

window.history.pushState('new', 'inventory', '/new');

#想要的结果

https://www.test.com/new?Year=2020,2019&Pricerange=10001-20000,20001-30000,30001-40000&Mileagerange=1001-2000,2001-3000&Bodystyle=4dr%20Car,Convertible

#我要附加的数据

  "year": [
    "2017",
    "2018"
  ],
  "model": [
    "Escape",
    "Edge"
  ],
  "mileage": [
    "1-1000"
  ],
  "bodyStyle": [
    "Convertible",
    "4dr Car",
    "2dr Car"
  ],
  "priceRange": [
    "$20,000-$30,000",
    "$30,000-$40,000"
  ]

【问题讨论】：

你为什么不能在req.body@上面的儿子做pst请求？？？

我认为他想要实现的是将这些数据附加到“/new”，这样结果就会像新的？Year=2020,2019&Pricerange=10001-20000,20001。 ....取决于数据

你试过window.history.pushState('new', 'inventory', '/new?Year=2020,2019&Pricerange=10001-20000,20001-30000,30001-40000&Mileagerange=1001-2000,2001-3000&Bodystyle=4dr%20Car,Convertible')吗？ URL 中的逗号不是path 组件的一部分，它们是search（“查询”）组件的一部分，因此它们是有效的。

但我认为他想要实现的是动态

你所说的“动态”是什么意思？ developer.mozilla.org/en-US/docs/Web/API/History/pushState 接受整个 URL 字符串，因此如果您想动态构建它，您必须编写一个函数来根据您的数据格式执行此操作。

【参考方案1】：

jQuery.param() 似乎重复数组值，所以你必须找到一些现有的库或编写自定义函数。

类似的东西（但可能会优化更多）：

/**
 * Prepare `search` part of URL.
 * @param object o Each key is a param name and value is an array of values
 * @return string
 */
function createURLQuery (o) 
  return Object.keys(o)
      .map(key => `$encodeURIComponent(key)=`
          + o[key].map(v => encodeURIComponent(v)).join(','))
      .join('&')


// Example code
const data = 
  "year": [
    "2017",
    "2018"
  ],
  "model": [
    "Escape",
    "Edge"
  ],
  "mileage": [
    "1-1000"
  ],
  "bodyStyle": [
    "Convertible",
    "4dr Car",
    "2dr Car"
  ],
  "priceRange": [
    "$20,000-$30,000",
    "$30,000-$40,000"
  ]
;

const newURL = `/new?$createURLQuery(data)`;

console.log('Pushing new URL', newURL);

// window.history.pushState('new', 'inventory', newURL);

您必须自己对数据进行任何其他更改。 “期望的结果”似乎去掉了“$”字符并将参数名称大写。

【参考方案2】：

将JSON 数据解析为JS 对象，并根据您的需要解析键和值。我认为没有任何方法可以完全实现您想要的字符串格式，除非有人为这种情况编写了 npm 包（不是深度嵌套的 json 对象到查询字符串）。

利用JSON.parse() 和Object.entries() 根据JSON 输入构建查询字符串。

我已经创建了一个example 来看看。您仍然需要对货币进行一些解析，也许还有更多。

如果 REPL 链接不起作用，请参阅下文。

const json = `

  "year": [
    "2017",
    "2018"
  ],
  "model": [
    "Escape",
    "Edge"
  ],
  "mileage": [
    "1-1000"
  ],
  "bodyStyle": [
    "Convertible",
    "4dr Car",
    "2dr Car"
  ],
  "priceRange": [
    "$20,000-$30,000",
    "$30,000-$40,000"
  ]
`;

const parsedJson = JSON.parse(json);

let queryString = '?';

Object.entries(parsedJson).forEach(([key, value], index) => 
  let string = `$index != 0 ? '&' : ''$key=$value.join()`;
  queryString += string;
);

const encodedQueryString = encodeURIComponent(queryString.trim())

【讨论】：

我尝试过使用api.jquery.com/jquery.param

我对 jQuery 不是很熟悉，但肯定有一种方法可以使用 jQuery。我上面描述的方法肯定会奏效。

然后发布您的答案，您发布的内容没有实际用途，只需将其作为评论然后

我添加了一个例子。