在变量索引处插入字符串

Question

我一直没有找到一个可行的例子或者一个好的解释，来说明如何实现以下内容：（非常感谢任何人能够指引我正确的方向。）

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

当我的页面上发生某些事件时，我会通过javascript或者jquery来更新查询字符串，无论使用哪个都可以。

例如，页面上有一个多选下拉列表，其中包含 [sources]、[plans] 和 [codes]... 这些下拉列表有ID，我将在选择下拉列表中的项目时，更新请求URL。

当从下拉列表中选择了一个ID为“3”的源（或复选框，不管使用哪种页面控件），则需要添加“3”到查询字符串参数 sources[1,2] 中。同样地，如果取消选择ID为“2”的项，则该项也将从查询字符串中删除，留下新字符串 sources[1,3]

我对JavaScript / jQuery以及更高级的字符串操作还比较陌生。我一直在尝试重建一些东西来证明这一点，并得到了以下尚不完全工作的结果。

基本上我的初始if语句按预期工作，但是一旦 else 被触发（需要将另一个ID添加到查询字符串中的现有模型中 - 就像[sources]或者[codes]的第二个ID），它就会返回奇怪的输出——因为我无法获取正确的公式以正确地更新所有内容。

//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

}

如果有人有任何示例或演示，我也会非常感激。 这是一个演示，我正在尝试让它工作。

- geostima

---

可以在问题中包含HTML，并创建stacksnippets，jsfiddle http://jsfiddle.net来演示吗？ - guest271314

你能发一下“奇怪的输出”吗？ ;) - An0nC0d3r

$.serialize和$.serializeArray可能会有所帮助 :) - Ninh Pham

fiddle已添加：https://jsfiddle.net/xf4zt25a/2/ - geostima

你确定 sources[1,2]& 是正确的吗？还是 sources=[1,2]& 可能是正确的？ - Nina Scholz

抱歉，Nina，你是正确的，我完全忽略了这一点。 - geostima

Answer 1

看起来您只是在解析和更新查询字符串方面遇到了一些问题。如果是这样的话，我有一个我一直在使用的函数可以帮助您（谷歌，谢谢你）。

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);

- Donnie D'Amato

---

谢谢您的输入，这太棒了。我最终采用了妮娜的解决方案，这正是我下一个考虑的方向。 - geostima

Answer 2

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

这比每次更改某个值时重新构建字符串要好得多。

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>');

- Nina Scholz

---

我喜欢这个想法，这正是我昨晚所思考的并正在实现的。创建一个类，为每种类型都配备数组，就像你描述的那样，我有函数来添加和删除每个数组中的字符串，基于需要添加和/或删除id的情况。 - geostima