如何为Ajax请求添加/管理持久性URL参数？

Question

假设我在我的网站上有两个资源列表：用户和组。当我以10为增量分页时，我想保存我的列表状态，这样当我将页面的URL给予某人时，他们将被导航到具有相同页面大小的同一页面。

这很容易用一个列表，我甚至会放弃Ajax和使用简单的HTTP参数，而是增加了复杂性，阿贾克斯命令都采取同样的参数，例如：

user/getlist?maximum=10&offset=0&systemId=123456 
group/getlist?maximum=10&offset=0&systemId=123456 

最初，我正在考虑使用锚点，以便网址如下所示：

admin/users+groups.php#?maximum=10&offset=0&systemId=123456 

但是，这显然不适用于两个列表。我可以在jQuery中轻松完成这项工作吗？还是需要在原始JavaScript中编写代码？

Answer 1

这是我想出的解决方案。首先，我们需要加载的页面加载自锚AJAX参数：

$(document).ready(function() { 
    if (window.location.hash.indexOf('#?') == 0) { 
     var hashParameters = window.location.hash.substring(2).split('&'); 
     var hashIndex = 0; 

     for (var i = 0; i < hashParameters.length; i++) { 
      var hp = hashParameters[i] 
      var delim = hp.indexOf('='); 
      var key = hp.substring(0, delim); 
      var value = hp.substring(delim + 1); 

      addParameter(); 
      $('#parameter-' + i + '-key').val(key); 
      $('#parameter-' + i + '-value').val(value); 
     } 
    } else { 
     addParameter(); 
     $('#parameter-0-key').val('id'); 
    } 
}); 

addParameter()是添加AJAX参数页面视觉上的方法，然后我更新它的值。

然后，它只是一个建立锚点，并将其设置回URL的事情：

function getParameterValues() { 
    // ... 
    var anchor = ''; 
    for (var i = 0; i < index + 1; i++) { 
     var keyName = '#parameter-' + i + '-key'; 
     var valueName = '#parameter-' + i + '-value'; 
     var key = $(keyName).val(); 
     var value = $(valueName).val(); 
     if (typeof key == 'undefined' || typeof value == 'undefined') { 
      continue; 
     } 

     if (key == '') { 
      continue; 
     } 

     // ... 

     if (anchor.length == 0) { 
      anchor += '?' + key + '=' + value; 
     } else { 
      anchor += '&' + key + '=' + value; 
     } 
    } 
    window.location.hash = '#' + anchor; 
    return values; 
} 

这将是很好，如果jQuery的曾经与一个方法来添加/删除参数，如URL上来这本身。

Answer 2

你可以使用逗号（或破折号）分隔符来做到这一点，并使每个列表都成为查询字符串参数。

更新，页面的URL看起来像这样：
管理/用户+ groups.php ulist = 10,0,123456 &为Glist = 12,0,123457

然后在JavaScript中，称此？函数来获取查询字符串参数值：

function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

// you should probably break this out and null check the parameter before splitting, but for the sake of brevity: 
var userListVals=getParameterByName("ulist").split(","); 
var groupListVals=getParameterByName("glist").split(","); 

var userListURL = "/user/getlist?maximum=" + userListVals[0] + "&offset=" + userListVals[1] + "@systemId=" + userListVals[2]; 
var groupListURL = "/user/getlist?maximum=" + groupListVals[0] + "&offset=" + groupListVals[1] + "@systemId=" + groupListVals[2]; 

它依赖于以正确的顺序是值，但如果你生成的URL自己，这不应该是一个问题。

更新：