Question

我无法找到一个可行的例子或一个很好的解释我如何能够实现以下目标:(如果有人能指出我正确的方向，我将不胜感激。

我有一个查询字符串： **"/api/bla?sources=[1,2]&plans=[1,2]&codes=[1,2,3]"**

当我的页面上发生某些事件时，我将通过 javascript 或 jquery 更新查询字符串，无关紧要。

例如，页面上有一个多选下拉列表，其中包含[来源]和[计划]和[代码]。 ..这些下拉列表有ID，我要更新我的请求网址，选择下拉菜单中的项目。

当ID为＃34; 3＆＃34;从下拉列表中选择（或复选框，无论使用什么页面控件）查询字符串参数源[1,2]将需要＆＃34; 3＆＃34;追加。同样，如果ID为＆＃34; 2＆＃34;未被选中，它同样会从查询字符串中删除，将新字符串保留为 sources [1,3]

我对javascript / jquery有点新，尤其是更高级的字符串操作。我一直试图重新创建一些东西来证明这一点，并且已经得到了以下不能完全发挥作用的东西。

基本上我的初始if语句按预期工作，但是当else被命中时（当需要将另一个ID添加到查询字符串中的现有模型时 - 就像[ sources 的第二个ID） ]或[代码]）它返回了不稳定的输出 - seeng，因为我无法获得正确更新所有内容的正确公式。

//TIMEMTABLE QUERY
function updateCalendar(filter_id, filter_element) {
    //Run through the filter checks before making final call to query and update timetable?

    //GET THE MODEL/OBJECT NAME
    var queryName = filter_element.attr('data-owner');


    //GET THE IDs //this is either an array of all selected IDs or a single id which is used in the else statement
    var queryId = filter_element.attr('value');
    var queryIds = $('#'+filter_id).val();


    var modelCheckIndex = requestString.toLowerCase().indexOf(queryName.toLowerCase());
    //build a request string
    if (modelCheckIndex < 0) {
        console.info('ADD MODEL TO QUERY STRING');
        requestString = requestString + "&" + (queryName.toLowerCase() + "[" + queryIds + "]");
        console.log(requestString);
    }
    else{
        console.info('UPDATE MODEL ON QUERY STRING');
        var position = requestString.toLowerCase().indexOf(queryName.toLowerCase());
        //requestString = requestString.substr(modelCheckIndex -1, requestString.length -1) + "," + queryId + "]";
        requestString = requestString.slice(modelCheckIndex.indexOf("]"), modelCheckIndex) + "," + queryId;
        console.log(requestString);

    }

//MAKE THE API CALL USING CREATED QUERY STRING

}

如果有人有任何例子或小提琴，我也会很感激。 Fiddle我正努力开始工作

Answer 1

看起来您只是在解析和更新查询字符串时遇到问题。在这种情况下，我有一个我一直在使用的功能（thank you Google）

function getUriParams(string) {
    var params = {},
    queryString = string.slice(string.lastIndexOf('?')).substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
    while (m = regex.exec(queryString)) {
        params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
    return params;
}

输入是您的requestString，输出是查询字符串的键值对的对象。

要使对象成为字符串，jQuery可以使用$.param()轻松实现。

//get key value pairs
var obj = getUriParams(requestString);

//make query string
var str = $.param(obj);

Answer 2

我建议稍微改变逻辑。我会为所需参数使用一些数据存储，并在每次必要时重建请求字符串，如下例所示。

比每次更改某些值时重建字符串要好得多。

＆＃13;

var data = {
        sources: [1, 2],
        plans: [],
        codes: [1, 3, 4]
    };

function buildStr() {
    function get(key) { return key + '=' + JSON.stringify(data[key]); }
    return '/api/bla?' + ['sources', 'plans', 'codes'].map(get).join('&');
}

document.write('<pre>' + buildStr() + '</pre>');

＆＃13;

在变量索引处插入字符串

2 个答案: