使用復選框中的window.location.assign將多個GET參數添加到URL

Question

我正在嘗試使用JavaScript將參數添加到當前URL，以便過濾WordPress帖子。 例如： http://domain.com/houses/?rooms=1,2&bath=1&yard=yes ： http://domain.com/houses/?rooms=1,2&bath=1&yard=yes

我已經使用參數之一成功完成了此操作，但未能理解如何添加多個參數。 得到這個的正確方法是什么？

另外，是否使用window.location.assign() ，將參數添加到URL的正確方法？ 使用AJAX更好/更安全嗎？

下面是我的代碼

的HTML

<div id="filter-rooms">
       <ul>
           <li>
               <input type="checkbox" value="1" id="rooms" />1 Room</li>
           <li>
               <input type="checkbox" value="2" id="rooms" />2 Rooms</li>
           <li>
               <input type="checkbox" value="3" id="rooms" />3 Rooms</li>
           <li>
               <input type="checkbox" value="4" id="rooms" />4 Rooms</li>
      </ul>
</div>

<div id="filter-bath">
    <ul>
        <li>
            <input type="checkbox" value="1" id="bath" />1 Bathrooms</li>
        <li>
            <input type="checkbox" value="2" id="bath" />2 Bathrooms</li>
        <li>
            <input type="checkbox" value="3" id="bath" />3 Bathrooms</li>
    </ul>
</div>

<div id="filter-yard">
    <ul>
        <li>
            <input type="radio" name="yard" value="yes" id="yard" />Yes</li>
        <li>
            <input type="radio" name="yard" value="no" id="yard" />No</li>
    </ul>
</div>

的JavaScript

$('#filter-rooms').on('change', 'input[type="checkbox"]', function () {

    var $ul = $(this).closest('ul'),
        vals = [];

    $ul.find('input:checked').each(function () {

        vals.push($(this).val());

    });

    vals = vals.join(",");

    window.location.assign('?rooms=' + vals);

});

現在，在上面顯示的JavaScript中，我設法使rooms參數成功運行，但是當我為其他參數復制此參數時，它將URL替換為rooms參數，而不是像這樣將其添加到URL的末尾- &bath=1&yard=yes

jsFiddle： http : //jsfiddle.net/g9Laforb/1/ （注意：因為jsFiddle不允許，所以缺少window.location.assign（）。）

任何對此的建議將不勝感激。

Answer 1

首先，請勿在多個元素上使用相同的id 。 請參閱為什么具有多個具有相同id屬性的HTML元素是一件壞事？

你的問題是這條線

 window.location.assign('?rooms=' + vals);

您需要動態更新查詢字符串。

使用這種方法

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

從添加或更新查詢字符串參數

和自定義屬性，例如

<ul data-type="rooms">

你可以做

window.location.href = updateQueryStringParameter(window.location.href, $ul.attr('data-type'), vals);

代替

window.location.assign('?rooms=' + vals);

Answer 2

嘗試以下操作：定義變量以存儲房間，浴室和院子中選定的值，並在每個輸入更改處理程序中相應地創建url。

roomVal = '';
bathVal = '';
yardVal = '';

$('#filter-rooms').on('change', 'input[type="checkbox"]', function () {
     roomVal = $(this).closest('ul').find('input[type="checkbox"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

$('#filter-bath').on('change', 'input[type="checkbox"]', function () {
     bathVal = $(this).closest('ul').find('input[type="checkbox"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

$('#filter-yard').on('change', 'input[type="radio"]', function () {
     yardVal = $(this).closest('ul').find('input[type="radio"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

JSFiddle演示

Answer 3

您可以簡單地使用window.location.href如果variable存儲了任何值，則可以使用+符號將其連接起來。

var somedata = somedata;

window.location.href = "http://www.yourwebsite.com?data1=somedata&data2="+somedata;