Question

我有一个Ajax选择输入，在更改时更改URL，页面不刷新。但是，当多次更改选择输入时，重复的参数将堆叠在URL中：

[域] /find.php?cat=1#pricemin=10&pricemax=500#pricemin=10&pricemax=500

如何使用javascript将其编码回：

[域] /find.php?cat=1#pricemin=10&pricemax=500

这样没有重复的参数？

我当前的jQuery示例如下：

$('#filterform select').on('change', function(e){
        var dummy = $('#filterform').serialize(),
            loc = $('<a>', {href:window.location})[0];

        someajaxfunction();//do ajax function here
        if(history.pushState){
            history.pushState(null, null, loc +'#'+ dummy);
        }
    });

我尝试用loc替换loc.pathname，并解决了重复的参数问题。但是我的?cat=1表单参数也不见了，这是不可取的。我希望通过URL搜索和修改jQuery / javascript方法来查看此问题，例如：

我们拥有的是

[域] /find.php?cat=1&subcats%5B%5D=1&subcats%5B%5D=2

我们想要的是

[域] /find.php?cat=1&subcats=1+2

有可能吗？

注意：发布此问题5分钟后，我意识到使用loc.pathname + loc.search解决了我的问题，对不起这篇长篇文章感到抱歉。我仍然对URL搜索和修改jQuery / javascript方法感到好奇。如果有人能提供起点，我将不胜感激，谢谢！

Answer 1

function removeDuplicate(url) {
  url = decodeURIComponent(url);                  // decode the url, %5B becomes [ and ,%5D becomes ]. Hence the url becomes  [domain]/find.php?cat=1&subcats[]=1&subcats[]=2
  var query = url.split('?')[1];                  // get only the query
  var parts = query.split('&');                   // split the query into parts: cat=1, subcats[]=1, subcats[]=2
  var params = {};
  for (var i = 0; i < parts.length; i++) {
    var nv = parts[i].split('=');
    if (!nv[0]) continue;
    var value = nv[1] || true;
    if (params[nv[0]] && params[nv[0]].indexOf(value)) {
      params[nv[0]].push(value);
    } else {
      params[nv[0]] = [value];
    }
  }

  url = url.split('?')[0] + '?';
  var keys = Object.keys(params);
  for (var i = 0; i < keys.length; i++) {
    url += keys[i] + '=' + params[keys[i]].join('+');

    if (i !== keys.length - 1) url += '&';
  }
  return url;
}

如何解决URL中的重复参数

1 个答案: