在變量索引處插入字符串

Question

我無法找到一個可行的例子或一個很好的解釋我如何能夠實現以下目標:(如果有人能指出我正確的方向，我將不勝感激。

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

當我的頁面上發生某些事件時，我將通過javascript或jquery更新查詢字符串，無關緊要。

例如，頁面上有一個多選下拉列表，其中包含[ 來源 ]和[ 計划 ]和[ 代碼 ] ...這些下拉列表中有ID，我將更新我的請求URL，並選擇下拉菜單中的項目。

當從下拉列表中選擇ID為“3”的源時（或復選框，無論使用哪個頁面控件），查詢字符串參數源[1,2]將需要附加“3”。 同樣地，如果未選擇ID為“2”的項目，它同樣將從查詢字符串中刪除，將新字符串保留為源[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

}

如果有人有任何例子或小提琴躺在我身邊，我也會很感激。 小提琴我想去上班

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

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