2012-08-29 57 views
3

以假設www.mydomain.com?param1=example爲例。在url參數中存儲鍵值對列表,javascript。

存儲第二個參數是鍵值對列表的最佳方式是什麼?當時我用&param2=key|value,key|value。我使用垂直線將鍵與值分開,並使用逗號進行配對,等號後的所有內容均使用encodeURIComponent()進行編碼。這工作正常。

但是,用戶可以控制這個值......而作爲明智的人類,我們都知道用戶可能做的第一件事就是將豎線或逗號作爲打破我的參數解析器的值之一。有一個更好的方法嗎?我見過PHP用戶正在討論在urls中存儲關聯數組,但我正在尋找一個純JavaScript解決方案

+1

你知道,你可以使用數組作爲GET參數:http://www.webmasterworld.com/forum88/5808.htm –

回答

3

PHP(和其他服務器端語言)支持在查詢字符串中傳遞數組。

www.mydomain.com?param1=example&param2[key1]=value1&param2[key2]=value2 

PHP將解析GET字符串,例如:

array(2) { 
    ["param1"]=> 
    string(7) "example" 
    ["param2"]=> 
    array(2) { 
    ["key1"]=> 
    string(6) "value1" 
    ["key2"]=> 
    string(6) "value2" 
    } 
} 

如果不通過鍵,它會成爲一個數字數組:

www.mydomain.com?param1=example&param2[]=value1&param2[]=value2 

會被解析爲:

array(2) { 
    ["param1"]=> 
    string(7) "example" 
    ["param2"]=> 
    array(2) { 
    [0]=> 
    string(6) "value1" 
    [1]=> 
    string(6) "value2" 
    } 
} 

UPDATE:您也可以在JavaScript中解析查詢字符串。

下面是一個簡單的jQuery插件我做:

$.parseQuery = function(str) { 
    var ret = {}; 
    $.each(str.split("&"), function() { 
     var data = this.split('='), 
      name = decodeURIComponent(data.shift()), 
      val = decodeURIComponent(data.join("=")).replace('+', ' '), 
      nameVal = name.match(/(.*)\[(.*)\]/); 

     if (nameVal === null) { 
      ret[name] = val; 
     } 
     else { 
      name = nameVal[1]; 
      nameVal = nameVal[2]; 
      if (!ret[name]) { 
       ret[name] = nameVal ? {} : []; 
      } 
      if ($.isPlainObject(ret[name])) { 
       ret[name][nameVal] = val; 
      } 
      else if($.isArray(ret[name])){ 
       ret[name].push(val); 
      } 
     } 
    }); 
    return ret; 
}; 

然後,你可以這樣做:$.parseQuery('param1=example&param2[]=value1&param2[]=value2');

+0

這是可能的只用Javascript來做到這一點?用這種方式解析get字符串?這些參數僅用於查詢本地數據。我實際上只是使用參數來允許用戶爲過濾的數據添加書籤 – JonWells

+0

@CrimsonChin:是的。 'window.location.search'包含get字符串。然後你可以用JavaScript解析它。你可以使用我寫的這個方法:https://gist.github.com/3528917 :-)(注意:'window.location.search'包含'?',你需要像這樣調用它:'$ .parseQuery(window.location.search.substring(1))')。 –

+0

我沒有訪問查詢字符串 - 我認爲它是JQM的事情,因爲#標籤。這就是說,我可以拆分window.location.href來獲取查詢字符串,並且你的github代碼很好地工作。我可以建議把代碼放在你的答案中嗎?我認爲它對問題/答案非常有價值。它是你的代碼,所以選擇是你的。謝謝你 – JonWells

0

一個可能的解決方案是將用戶輸入中的管道和逗號轉移到您的url之前。

這意味着消毒用戶輸入值,並用一些不會破壞您的代碼或完全剝離代碼的東西代替|,

+0

問題是值是查詢參數,他們需要匹配他們正在查詢的數據 – JonWells

+0

你會在途中需要進行某種編碼/解碼。請記住&符號也會破壞你的數組。 – Ohad

0

當我想到序列化鍵值對列表時,我立即想到了使用查詢字符串。

對於基礎知識(JSON用於顯示反序列化):

foo=bar&foo=baz&fizz=buzz&alpha&beta= 

基本上是:

{ 
    foo: [ 
     'bar', 
     'baz' 
    ], 
    fizz: 'buzz', 
    alpha: null, 
    beta: '' 
} 

但特殊字符必須進行轉義:

foo=bar%26baz 

本質:

{ 
    foo: 'bar&baz' 
} 

這意思是,你可以通過一個查詢字符串作爲另一個查詢字符串的值:

foo=bar%3Dbaz%26fizz%3Dbuzz 

基本上是:

{ 
    foo: 'bar=baz&fizz=buzz' 
} 

而且foo可以解析產生:

{ 
    bar: baz, 
    fizz: buzz 
} 

儘管如此,在編碼/解碼時很容易出錯,並且只要開始雙重編碼和雙重解碼,就可以確保您遇到問題。如果可以,請使用單個查詢字符串來包含所有必要的數據,並且不要在查詢字符串中嵌入查詢字符串。