使用JQuery传递参数时页面持续重载问题求助

我在给控制器传递page和date_filter参数时，遇到了页面持续重载的问题——用JQuery生成带新参数的URL并跳转后，页面会无限循环刷新。

用到的代码 #

HTML #

<input type="text" class="form-control date_range_set change_url" id="MM/yy" placeholder="MM/yy">

JQuery #

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};

$(".change_url").change(function(){
  var param = getUrlParameter('date_filter');
  var page = getUrlParameter('page');
  var date_filter = $(this).val();
  
  var pathname = window.location.pathname;
  var origin   = window.location.origin;
  
  var new_url = origin+pathname+"?page="+page+"&date_filter="+date_filter;
  window.location.href = new_url;
});

问题根源 #

1. 无效参数导致异常跳转：当URL里没有page参数时，getUrlParameter会返回false，拼出来的URL就变成了?page=false&date_filter=xxx。如果控制器不识别page=false这种无效值，会返回默认页面，进而再次触发跳转逻辑，形成循环。
2. change事件重复触发：页面刷新后，输入框的值可能被浏览器自动填充，或者你有代码把URL里的date_filter值回显到输入框，这会再次触发change事件，重复执行跳转。

解决办法 #

1. 修复参数获取函数 #

把参数不存在时的返回值从false改成null或默认值，避免生成无效参数：

var getUrlParameter = function getUrlParameter(sParam, defaultValue = null) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return defaultValue;
};

2. 安全拼接URL参数 #

用URLSearchParams来构建参数，避免手动拼接的错误，同时只保留有效参数：

$(".change_url").change(function(){
  var date_filter = $(this).val();
  // 不存在page参数时用默认值1
  var page = getUrlParameter('page', 1);
  
  var pathname = window.location.pathname;
  var origin   = window.location.origin;
  
  var params = new URLSearchParams();
  params.set('date_filter', date_filter);
  // 只有page有效时才添加
  if(page !== null) {
      params.set('page', page);
  }
  
  var new_url = origin + pathname + '?' + params.toString();
  window.location.href = new_url;
});

3. 避免初始化触发change事件 #

如果需要从URL读取date_filter回显到输入框，一定要先设值再绑定事件：

// 先设置输入框初始值
var initialDate = getUrlParameter('date_filter');
if(initialDate) {
    $(".change_url").val(initialDate);
}

// 再绑定change事件
$(".change_url").change(function(){
    // 上面的跳转逻辑
});

内容的提问来源于stack exchange，提问作者discussion