JS中URL引數的編解碼
HTML中的$("form").serialize()函式,在submit按鈕點選時,將form表單中含有name的input整理成一個“name=aaa&pass=bbb”這樣的字串,使用get方法請求時會將此字串新增到請求url後面作為引數字尾,如果請求內容中存在漢字(即form表單中需要傳輸的input中有漢字),漢字將轉換為一種由“%”開頭的編碼,如下圖:
下圖是將$("form").serialize()返回的字串通過split('&')分割之後的陣列,上面為未解碼的陣列,下面為解碼之後又split('=')分割的右值:(純獲取數值完全可以使用正則,這裡只做演示)
從上面的陣列可以看到,漢字在url中傳輸時會被編碼,其實不僅漢字,某些特殊字元,如空格等在傳輸時也會被編碼。編碼方式主要有兩種:
1.encodeURI編碼
定義和用法:: encodeURI() 函式可把字串作為 URI 進行編碼。
語 法: encodeURI(URIstring)
引數 描述: URIstring 必需。一個字串,含有 URI 或其他要編碼的文字。
返 回 值: URIstring 的副本,其中的某些字元將被十六進位制的轉義序列進行替換。
說 明: 該方法不會對 ASCII 字母和數字進行編碼,也不會對這些 ASCII 標點符號進行編碼: - _ . ! ~ * ' ( ) 。
該編碼方法的目的是對 URI 進行完整的編碼
2.encodeURIComponent() 編碼
定義和用法: encodeURIComponent() 函式可把字串作為 URI 元件進行編碼。
語 法: encodeURIComponent(URIstring)
引數 描述: URIstring 必需。一個字串,含有 URI 元件或其他要編碼的文字。
返 回 值: URIstring 的副本,其中的某些字元將被十六進位制的轉義序列進行替換。
說 明: 該方法不會對 ASCII 字母和數字進行編碼,也不會對這些 ASCII 標點符號進行編碼: - _ . ! ~ * ' ( ) 。
其他字元(比如 :;/?:@&=+$,# 這些用於分隔 URI 元件的標點符號),都是由一個或多個十六進位制的轉義序列替換 的。
提示:
注意 encodeURIComponent() 函式 與 encodeURI() 函式的區別之處,前者假定它的引數是 URI 的一部分(比如協議、主機名、路徑或查詢字串)。因此 encodeURIComponent() 函式將轉義用於分隔 URI 各個部分的標點符號。
例如當傳遞的引數為某個http地址時,需要使用encodeURIComponent()編碼,如下:
<a href="http://passport.baidu.com/?logout&aid=7&url='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');
還有這種例子:
解碼方式:
encodeURI()編碼的解碼函式為 decodeURI()
encodeURIComponent()編碼的解碼函式為 decodeURIComponent(),
一定要注意的是,引數中正常的“+”依然被解碼成原來的“+”,但是引數中的空格也會被解碼成“+”,這就需要在解碼前進行對空格的處理:decodeURIComponent(str.replace("/\+/g","%20")),這裡str中原來正常的“+”經過編碼之後會被轉成“%2B”,正常的空格被轉成“+”,而不是轉成一個編碼,所以解碼的時候“%2B”自然被解碼為“+”,但“+”卻依然被解碼為“+”,就出現了“+”編碼解碼後是“+”,空格編碼再解碼之後也是“+”的局面。
拓展:
encodeURI()編碼 和 encodeURIComponent()編碼方式是替代早期 escape() 的方法, 因為ECMAScript v3 反對使用escape()方法,
escape()方法也是對引數的編碼方式,不會對 ASCII 字母和數字進行編碼,也不會對下面這些 ASCII 標點符號進行編碼: * @ - _ +
. / 。其他所有的字元都會被轉義序列替換,其解碼方式為unescape()。