Question

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

使用一个列表很容易，我甚至会放弃Ajax并使用简单的HTTP参数，但为了增加复杂性，Ajax命令都采用相同的参数，例如：

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

最初，我在考虑使用锚点，因此URL看起来像：

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

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

Answer 1

您可以使用逗号（或破折号）分隔符执行此操作，并使每个列表成为查询字符串参数。

更新，页面的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，则不应该成为问题。

更新

Answer 2

这是我提出的解决方案。首先，我们需要在页面加载时从锚点加载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添加/删除参数的方法就好了。

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

2 个答案: