详解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缂?瑙ｇ?????跺????涓???琚?杩?浜???璞＄?杩锋??浜???