詳解Javascript中的Url編碼/解碼,表單送出中網址編碼問題

璇?ВJavascript涓???Url缂???/瑙ｇ??,琛ㄥ????浜や腑缃???缂?????棰?

璇?ВJavascript涓???Url缂???/瑙ｇ??

??瑕?

????涓昏???瀵?RI缂?瑙ｇ?????稿?抽??棰???浜?浠?缁?锛?瀵?rl缂???涓???浜?瀛?绗???瑕?缂?????涓轟?涔???瑕?缂?????浜?璇????璇存??锛?骞跺?規??????浜?Javascript涓???缂?瑙ｇ???稿?崇????瀵瑰?芥??scape / unescape,encodeURI / decodeURI??encodeURIComponent / decodeURIComponent??

棰?澶??ヨ??

foo://example.com:8042/over/there?name=ferret#nose

\_/ \______________/ \________/\_________/ \__/

| | | | |

scheme authority path query fragment

URI??缁?涓?璧?婧???璇???????锛???甯告??浠???璇寸??Url????URI??涓?绉????稿??Url???煎?濡?涓??㈡??绀恒??涓??㈡???扮??Url缂???锛?瀹???涓?搴?璇ユ??????URI缂?????

涓轟?涔???瑕?Url缂???

??甯稿???涓??蜂?瑗塊??瑕?缂???锛?璇存??杩??蜂?瑗垮苟涓?????浼?杈???????澶?绉?澶??鳳?濡?Size杩?澶э???????绉??版??锛?瀵逛?Url?ヨ?達?涔???浠ヨ?杩?琛?缂???锛?????涓?rl涓???浜?瀛?绗??寮?璧鋒?т???

渚?濡?Url???闆??绗?覆涓?浣跨??ey=value???煎?矽??風??褰㈠??ヤ???锛????煎?逛??翠互&绗??峰????锛?濡?/s?q=abc&ie=utf-8??濡???浣???value瀛?绗?覆涓?????浜?=????&锛??ｄ??垮?浼??????ユ??rl?????″?ㄨВ????璇?锛???姝ゅ?椤誨?寮?璧鋒?т???&??=绗??瘋?琛?杞?涔?锛?涔?灏辨??瀵瑰?惰?琛?缂?????

??濡?锛?Url??缂????煎????ㄧ????ASCII??锛???涓???Unicode锛?杩?涔?灏辨??璇翠?涓??藉??rl涓?????浠諱???ASCII瀛?绗??渚?濡?涓?????????濡???瀹㈡?風??娴?瑙??ㄥ?????＄??娴?瑙??ㄦ??????瀛?绗???涓????????典?锛?涓??????戒???????棰???

Url缂?????????灏辨??浣跨?ㄥ???ㄧ??瀛?绗??娌℃???規???ㄩ???????規????涔????????闆??绗???昏〃绀洪?ｄ?涓?瀹??ㄧ??瀛?绗???

??浜?瀛?绗???瑕?缂???

RFC3986??妗ｈ?瀹?锛?Url涓?????璁稿?????辨??瀛?姣?锛?a-zA-Z锛????闆??锛?0-9锛???-_.~4涓??規??瀛?绗?互??????淇???瀛?绗???

RFC3986??妗ｅ??rl??缂?瑙ｇ????棰????轟?璇????寤鴻??锛????轟???浜?瀛?绗???瑕?琚?缂?????涓?浼?寮?璧?rl璇?涔???杞???锛?浠ュ??瀵逛負浠?涔?杩?浜?瀛?绗???瑕?缂??????轟??稿???瑙ｉ????

US-ASCII瀛?绗???涓?娌℃??瀵瑰????????闆??绗?

Url涓?????璁鎬嬌?ㄥ?????闆??绗???US-ASCII??涓???10-7F瀛????ㄩ?借〃绀烘?у?跺??绗??杩?浜?瀛?绗??戒??界?存?ュ?虹?闆??rl涓??????訛?瀵逛?80-FF瀛???锛?ISO-8859-1锛?锛??變?宸茬?瓒??轟?US-ACII瀹?涔???瀛??????達???姝や?涓???浠ユ?懼??rl涓???

淇???瀛?绗?

Url??浠ュ???????ュ共涓?缁?浠訛???璁???涓繪?恒??璺?寰?绛?????涓?浜?瀛?绗??:/?#[]@锛????ㄤ?????涓???缁?浠剁????渚?濡?:???風?ㄤ???????璁???涓繪?猴?/?ㄤ?????涓繪?哄??璺?寰?锛???ㄤ?????璺?寰????ヨ?㈠???幫?绛?绛???杩???涓?浜?瀛?绗??!$&'()*+,;=锛??ㄤ??ㄦ??涓?缁?浠朵腑璧峰?闆????浣??ㄧ??锛?濡?=?ㄤ?琛ㄧず?ヨ?㈠???頒腑?????煎?癸?&绗??風?ㄤ??????ヨ?㈠?涓????煎?廣??褰?缁?浠朵腑???????版??????杩?浜??規??瀛?绗??訛???瑕?瀵瑰?惰?琛?缂?????

RFC3986涓???瀹?浜?浠ヤ?瀛?绗?負淇???瀛?绗??

! * ' ( ) ; : @ & = + $ , / ? # [ ]

涓?瀹??ㄥ??绗?

杩???涓?浜?瀛?绗??褰?浠?浠??存?ユ?懼??rl涓????跺??锛????戒?寮?璧瘋В??绋?搴???姝т???杩?浜?瀛?绗??瑙?涓轟?瀹??ㄥ??绗????????寰?澶???

绌烘??Url?ㄤ?杈???杩?绋?锛??????ㄦ?峰?ㄦ??????杩?绋?锛?????????澶???绋?搴??ㄥ???Url??杩?绋?锛??芥?????藉??ユ???崇揣瑕???绌烘?鹼?????灏??ｄ?????涔???绌烘?肩??繪??

寮??蜂互??<> 寮??峰??灏????烽??甯哥?ㄤ??ㄦ????????涓?璧峰?闆????Url??浣???

# ??甯哥?ㄤ?琛ㄧず涔??炬????????

% ?懼???鋒??韬??ㄤ?瀵逛?瀹??ㄥ??绗??琛?缂????朵嬌?ㄧ???規??瀛?绗????姝ゆ??韬???瑕?缂???

{}|\^[]`~ ??涓?浜?缃??蟲????浼?杈?浠ｇ??浼?绡℃?矽?浜?瀛?绗?

??瑕?娉ㄦ??????锛?瀵逛?Url涓?????娉?瀛?绗??缂?????涓?缂?????绛?浠風??锛?浣???瀵逛?涓??㈡???扮??杩?浜?瀛?绗??濡???涓?缁?杩?缂???锛??ｄ?瀹?浠??????戒?????Url璇?涔???涓???????姝ゅ?逛?Url??瑷?锛??????????辨??瀛?绗????闆??锛??規??瀛?绗?-_.+!*'()杩???淇???瀛?绗?????藉?虹?闆?ㄦ??缁?缂?????Url涔?涓????朵?瀛?绗?????瑕?缁?杩?缂???涔??????藉?虹?闆??rl涓???

浣????變????插????锛?????灏?瀛??ㄤ?浜?涓???????缂???瀹??般??渚?濡?瀵逛?~绗??鳳??界??FC3986??妗ｈ?瀹?锛?瀵逛?娉㈡氮绗???锛?涓???瑕?杩?琛?Url缂???锛?浣???杩?????寰?澶?????缃??蟲????浼?杈?浠ｇ??浼?

濡?浣?瀵?rl涓?????娉?瀛?绗??琛?缂???

Url缂?????甯鎬?琚?绉頒負?懼???風???锛?Url Encoding锛?also known as percent-encoding锛?锛?????涓哄????缂????瑰???甯哥????锛?浣跨???懼???峰??涓?涓や???瀛?绗?????0123456789ABCDEF????浠ｈ〃涓?涓?瀛?????????杩??跺艦寮???Url缂???榛?璁や嬌?ㄧ??瀛?绗?????US-ASCII??渚?濡?a??S-ASCII??涓?瀵瑰???瀛?????0x61锛??ｄ?Url缂???涔???寰??扮??灏辨??%61锛???浠??ㄥ?闆????涓?杈???ttp://g.cn/search?q=%61%62%63锛?瀹???涓?灏辯????浜???oogle涓???绱?bc浜?????濡?@绗??峰??SCII瀛?绗???涓?瀵瑰???瀛???涓?x40锛?缁?杩?Url缂???涔???寰??扮????%40??

甯歌?瀛?绗???Url缂?????琛??

淇???瀛?绗???Url缂??? ! * " ' ( ) ; : @ &

%21 %2A %22 %27 %28 %29 %3B %3A %40 %26

= + $ , / ? % # [ ]

%3D %2B %24 %2C %2F %3F %25 %23 %5B %5D

瀵逛???ASCII瀛?绗????瑕?浣跨??SCII瀛?绗?????瓒???杩?琛?缂???寰??扮?稿???瀛???锛??跺??瀵規??涓?瀛????ц??懼???風?????瀵逛?Unicode瀛?绗??RFC??妗ｅ緩璁?浣跨??tf-8瀵瑰?惰?琛?缂???寰??扮?稿???瀛???锛??跺??瀵規??涓?瀛????ц??懼???風?????濡???涓?????浣跨??TF-8瀛?绗???寰??扮??瀛???涓?xE4 0xB8 0xAD 0xE6 0x96 0x87锛?缁?杩?Url缂???涔???寰??扳??%E4%B8%AD%E6%96%87????

濡?????涓?瀛???瀵瑰???ASCII瀛?绗???涓?????涓???淇???瀛?绗????姝ゅ????????浣跨?ㄧ?懼???瘋〃绀恒??渚?濡???Url缂?????锛?浣跨??TF-8缂???寰??扮??瀛?????0x55 0x72 0x6C 0xE7 0xBC 0x96 0xE7 0xA0 0x81锛??變???涓?涓?瀛???瀵瑰???ASCII涓?????淇???瀛?绗???Url??锛???姝よ?涓?涓?瀛?????浠ョ?ㄩ??淇???瀛?绗???Url??琛ㄧず????缁???Url缂?????浠ョ????????Url%E7%BC%96%E7%A0%81?? 锛?褰??訛?濡???浣???%55%72%6C%E7%BC%96%E7%A0%81??涔?????浠ョ????

?變????茬??????锛???涓?浜?Url缂???瀹??闆苟涓?瀹??ㄩ?靛驚杩??風??????锛?涓???????般??

Javascript涓???escape,encodeURI??encodeURIComponent???哄??

Javascript涓???渚?浜?3瀵瑰?芥?扮?ㄦ?ュ??rl缂???浠ュ??闆??娉???Url锛?瀹?浠???????escape / unescape,encodeURI / decodeURI??encodeURIComponent / decodeURIComponent???變?瑙ｇ????缂?????杩?绋?????????锛???姝よ?????瑙ｉ??缂?????杩?绋???

杩?涓?涓?缂??????芥?扳????escape锛?encodeURI锛?encodeURIComponent?????芥???ㄤ?灏?涓?瀹??ㄤ???娉???Url瀛?绗?漿??負??娉???Url瀛?绗?〃绀猴?瀹?浠???浠ヤ???涓?涓????廣??

瀹??ㄥ??绗????

涓??㈢??琛ㄦ?煎???轟?杩?涓?涓??芥?扮??瀹??ㄥ??绗???沖?芥?頒?浼?瀵矽?浜?瀛?绗??琛?缂???锛?

瀹??ㄥ??绗?

escape锛?69涓?锛? */@+-._0-9a-zA-Z

encodeURI锛?82涓?锛? !#$&'()*+,/:;[email?protected]_~0-9a-zA-Z

encodeURIComponent锛?71涓?锛? !'()*-._~0-9a-zA-Z

?煎?規?т???

escape?芥?版??浠?Javascript1.0???跺??灏卞???ㄤ?锛??朵?涓や釜?芥?版????avascript1.5??寮??ョ????浣????變?Javascript1.5宸茬???甯告????浜?锛???浠ュ????涓?浣跨??ncodeURI??encodeURIComponent骞朵?浼???浠?涔??煎?規?ч??棰???

瀵?nicode瀛?绗???缂????瑰?涓???

杩?涓?涓??芥?闆?逛?ASCII瀛?绗???缂????瑰??稿??锛?????浣跨?ㄧ?懼????涓や?????杩??跺??绗??ヨ〃绀恒??浣???瀵逛?Unicode瀛?绗??escape??缂????瑰???%uxxxx锛??朵腑??xxxx???ㄦ?ヨ〃绀?nicode瀛?绗???4浣?????杩??跺??绗???杩?绉??瑰?宸茬?琚?W3C搴?寮?浜???浣?????CMA-262????涓?浠??朵?????escape??杩?绉?缂???璇?娉???encodeURI??encodeURIComponent??浣跨??TF-8瀵歸??ASCII瀛?绗??琛?缂???锛??跺????杩?琛??懼???風?????杩???RFC?ㄨ????????姝ゅ緩璁?灏藉???界??浣跨?ㄨ?涓や釜?芥?版?誇唬escape杩?琛?缂?????

???ㄥ?哄??涓???

encodeURI琚??ㄤ?瀵逛?涓?瀹??寸??URI杩?琛?缂???锛???encodeURIComponent琚??ㄤ?瀵?RI??涓?涓?缁?浠惰?琛?缂?????

浠?涓??㈡???扮??瀹??ㄥ??绗????磋〃?兼?ョ??锛???浠?浼????幫?encodeURIComponent缂?????瀛?绗????磋?姣?encodeURI??澶с????浠?涓??㈡???拌?锛?淇???瀛?绗???????ㄦ?ュ????URI缁?浠訛?涓?涓?URI??浠ヨ????叉??澶?涓?缁?浠訛?????棰?澶??ヨ??涓???锛?????瀛?缁?浠訛?濡?URI涓??ヨ?㈠???扮??????绗??锛?濡?:?風?ㄤ?????scheme??涓繪?猴???風?ㄤ?????涓繪?哄??璺?寰????變?encodeURI??绾電??瀵矽薄??涓?涓?瀹??寸????URI锛?杩?浜?瀛?绗???RI涓????ュ氨???規???ㄩ??锛???姝よ?浜?淇???瀛?绗??浼?琚?encodeURI缂???锛???????涔?灏卞??浜???

缁?浠跺???ㄦ????宸辯???版??琛ㄧず?煎?锛?浣???杩?浜??版?????ㄤ??藉??????????缁?浠剁??淇???瀛?绗??????灏變?瀵艱?存?翠釜URI涓?缁?浠剁??????娣蜂貢????姝ゅ?逛???涓?缁?浠朵嬌??ncodeURIComponent锛???瑕?缂?????瀛?绗?氨?村?浜???

琛ㄥ????浜?

褰?Html??琛ㄥ??琚???浜ゆ?訛?姣?涓?琛ㄥ?????戒?琚?Url缂???涔??????ㄨ????????變????茬??????锛?琛ㄥ??浣跨?ㄧ??Url缂???瀹??闆苟涓?绗??????扮????????渚?濡?瀵逛?绌烘?間嬌?ㄧ??缂???骞朵???%20锛?????+?鳳?濡???琛ㄥ??浣跨?ㄧ????Post?規???浜ょ??锛???浠???浠ュ??TTP澶翠腑???版??涓?涓?Content-Type??header锛??間負application/x-www-form-urlencoded??澶ч?ㄥ??搴??ㄧ?搴????藉???杩?绉???????瀹??扮??Url缂???锛?浣????ㄥ?㈡?風??Javascript涓?锛?骞舵病??涓?涓??芥?拌?藉?灏?+?瘋В????绌烘?鹼????借??宸卞??杞??㈠?芥?般??杩???锛?瀵逛???ASCII瀛?绗??浣跨?ㄧ??缂???瀛?绗??????充?褰?????妗ｄ嬌?ㄧ??瀛?绗?????渚?濡???浠???tml澶撮?ㄥ??涓?

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />杩??鋒?瑙??ㄥ氨浼?浣跨??b2312?繪覆??姝ゆ??妗ｏ?娉ㄦ??锛?褰?HTML??妗ｄ腑娌℃??璁劇疆姝?eta??绛撅???娴?瑙??ㄤ??規??褰????ㄦ?峰??濂藉?昏???ㄩ???╁??绗???锛??ㄦ?蜂???浠ュ己?跺???缃?绔?浣跨?ㄦ??涓???瀹???瀛?绗???锛???褰???浜よ〃???訛?Url缂???浣跨?ㄧ??瀛?绗???灏辨??gb2312??

??妗ｅ??绗???浼?褰卞??encodeURI??锛?

涔????ㄤ嬌??ptana锛?涓轟?涔?涓???aptana涓???????幫????頒?涓?寰?杩鋒??????棰?锛?灏辨???ㄤ嬌??ncodeURI???跺??锛????闆??缂???寰??扮??缁????????崇??寰?涓?涓??楓??涓??㈡??????绀轟?浠ｇ??锛?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>

<body>

<script type="text/javascript">

document.write(encodeURI("涓???"));

</script>

</body>

</html>

杩?琛?缁???杈???E6%B6%93%EE%85%9F%E6%9E%83???劇?惰?骞朵???浣跨??TF-8瀛?绗???杩?琛?Url缂???寰??扮??缁???锛???oogle涓???绱⑩??涓?????锛?Url涓??劇ず????%E4%B8%AD%E6%96%87锛???

??浠ユ??褰??跺氨寰?璐ㄧ??锛??鵑??encodeURI杩?璺?椤甸?㈢??????籌?浣????????幫?姝ｅ父???典?锛?濡???浣?浣跨??b2312杩?琛?Url缂???涔?涓?浼?寰??拌?涓?缁??????????????ョ?浜?琚??????幫????ユ??椤甸?㈡??浠跺???ㄤ嬌?ㄧ??瀛?绗?????Meta??绛句腑??瀹???瀛?绗???涓?涓??村?艱?寸????棰???Aptana??缂?杈??ㄩ?璁ゆ???典?浣跨??TF-8瀛?绗?????涔?灏辨??璇磋?涓???浠跺????瀛??ㄧ???跺??浣跨?ㄧ????UTF-8瀛?绗?????浣????變?Meta??绛句腑??瀹?浜?gb2312锛?杩?涓??跺??锛?娴?瑙??ㄥ氨浼?????b2312?昏В??杩?涓???妗ｏ??ｄ????跺?ㄢ??涓?????杩?涓?瀛?绗?覆杩???灏變??洪??锛???涓衡??涓?????瀛?绗?覆??TF-8缂???杩???寰??扮??瀛?????0xE4 0xB8 0xAD 0xE6 0x96 0x87锛?杩?6涓?瀛?????琚?娴?瑙??ㄦ??b2312?昏В??锛??ｄ?灏變?寰??闆???涓?涓?姹?瀛???娑? ????锛?GBK涓?涓?涓?姹?瀛???涓や釜瀛???锛?锛?杩?涓?涓?姹?瀛??ㄤ???ncodeURI?芥?頒???寰??扮??缁???灏辨??%E6%B6%93%EE%85%9F%E6%9E%83????姝わ?encodeURI浣跨?ㄧ??杩???UTF-8锛?骞朵?浼????伴〉?㈠??绗?????褰卞????

?朵???Url缂????稿?崇????棰?

瀵逛?????涓?????Url??澶?????棰?锛?涓???娴?瑙??ㄦ??涓?????琛ㄧ?般??渚?濡?瀵逛?IE锛?濡???浣??鵑??浜?楂?绾ц?劇疆???繪??浠?TF-8????Url??锛??ｄ?Url涓???璺?寰??ㄥ????涓???浼?浣跨??TF-8杩?琛?Url缂???涔???????缁????＄??锛????ヨ?㈠???頒腑??涓????ㄥ??浣跨?ㄧ郴缁?榛?璁ゅ??绗???杩?琛?Url缂?????涓轟?淇?璇???澶т???浣??э?寤鴻???????懼??rl涓???缁?浠跺?ㄩ?ㄦ?懼???瀹???涓?瀛?绗???杩?琛?Url缂???锛???涓?渚?璧?浜?娴?瑙??ㄧ??榛?璁ゅ???般??

???锛?寰?澶?HTTP??瑙?宸ュ?鋒????娴?瑙??ㄥ?闆????绛??ㄦ?劇ずUrl???跺??浼????ㄥ?Url杩?琛?涓?娆¤В??锛?浣跨??TF-8瀛?绗???锛?锛?杩?灏辨??涓轟?涔?褰?浣???irefox涓?璁塊??Google??绱?腑?????跺??锛??闆?????劇ず??Url????涓?????缂?????浣?瀹???涓?????缁????＄??????濮?Url杩???缁?杩?缂???????浣???浠ュ?ㄥ?闆????涓?浣跨??avascript璁塊??location.href灏卞??浠ョ???烘?ヤ????ㄧ??绌?rl缂?瑙ｇ?????跺????涓???琚?杩?浜???璞＄?杩鋒??浜???