jQuery/Javascript - 用附加的查询字符串重新加载当前页面？

Question

我的表单上有一个下拉菜单,当选择某些内容时,我需要重新加载当前页面,但附加了查询字符串.

我该怎么做呢？

Answer 1

这是一个老问题,但它首先出现在谷歌搜索结果中.

我使用的解决方案类似于jAndy的解决方案.

window.location.pathname给我页面的网址没有查询字符串.然后,我可以构建查询字符串,"?"+$.param({'foo':'bar','base':'ball'})然后将其附加到路径名并设置为window.location.href.

window.location.href = window.location.pathname+"?"+$.param({'foo':'bar','base':'ball'})

Answer 2

var params = [
    "foo=bar",
    "base=ball"
];

window.location.href =
    "http://" +
    window.location.host +
    window.location.pathname +
    '?' + params.join('&');

change事件处理程序中的代码可以解决问题.

例如:

$('#my_dropdown_id').bind('change', function(){
    var params = [
        "foo=bar",
        "base=" + $(this).val()
    ];

    window.location.href = "http://" + window.location.host + window.location.pathname + '?' + params.join('&');
});

Answer 3

如果您使用最高评级的答案,则可能需要更换

http://

在代码中

window.location.protocol

这样它适用于其他协议,如https或文件.所以

window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.join('&');

Answer 4

实际上，有一个内置函数location可以使用，函数的名称是assign。

对于附加或修改，您也可以使用该类的另一个内置函数URL。函数的名称是searchParams.

因此，对于您的情况，您只需要以下示例：

const url = new URL(location.href);
url.searchParams.set('key', 'value');

location.assign(url.search);

2022 年更新

我创建了一个 TypeScript 函数来更轻松地应用带有参数的重定向：

const isClient = (): boolean => typeof window !== 'undefined';

type ParamsType = { [key: string]: string | number };

const redirectUrl = (url: string, params?: ParamsType): void => {
  if (isClient()) {
    try {
      const _url = new URL(url);

      if (params) {
        const keyList = Object.keys(params);
        for (let i = 0; i < keyList.length; i += 1) {
          const key = keyList[i];
          _url.searchParams.set(keyList[i], params[key]?.toString());
        }
      }

      window.location.assign(_url.href);
    } catch (e) {
      throw new Error('The URL is not valid');
    }
  }
};

export default redirectUrl;

Answer 5

如果您想要一种简单的方法来保留查询字符串并可能附加到它，请使用window.location.search; 这是一个片段：

var search = window.location.search + (window.location.search ? "&" : "?");
search += "param1=foo&param2=bar";
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search;

当然，您可以使用更复杂的方法来构建查询字符串的其余部分，如其他示例中所示，但关键是利用Location.search.