Jquery -向URL添加查询字符串时的页面循环

当使用jQuery向URL添加查询字符串时，如果操作不当，可能会导致页面陷入无限循环

以下是一个简单的示例，说明如何正确地向URL添加查询字符串，以避免页面循环：

$(document).ready(function() {
  // 监听浏览器的地址栏变化
  $(window).on('popstate', function() {
    // 获取当前URL
    var currentUrl = location.href;

    // 如果URL中已经有查询字符串，则获取并解析它
    var queryString = currentUrl.split('?')[1];
    if (queryString) {
      var queryParams = {};
      queryString.split('&').forEach(function(param) {
        var parts = param.split('=');
        queryParams[parts[0]] = decodeURIComponent(parts[1]);
      });
    } else {
      var queryParams = {};
    }

    // 修改查询参数
    queryParams.myParam = 'myValue';

    // 将修改后的查询参数添加回URL
    var newQueryString = Object.keys(queryParams).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(queryParams[key]);
    }).join('&');
    var newUrl = currentUrl.split('?')[0] + '?' + newQueryString;

    // 更新浏览器地址栏，但不要触发页面刷新
    history.pushState({}, document.title, newUrl);
  });
});

这个示例中，我们首先监听popstate事件，当用户点击浏览器的前进/后退按钮时触发。然后，我们获取当前URL，解析查询字符串，修改查询参数，并将修改后的查询参数添加回URL。最后，我们使用history.pushState()方法更新浏览器地址栏，但不会触发页面刷新。

通过这种方式，我们可以避免在向URL添加查询字符串时导致页面循环。