DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript encodeURI 和encodeURIComponent
JavaScript encodeURI 和encodeURIComponent
編輯:關於JavaScript     

encodeURI和encodeURIComponet函數都是javascript中用來對URI進行編碼,將相關參數轉換成UTF-8編碼格式的數據。URI在進行定位跳轉時,參數裡面的中文、日文等非ASCII編碼都會進行編碼轉換。

這兩個函數功能上面比較接近,但是有一些區別。

 encodeURI:不會進行編碼的字符有82個 :!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
 encodeURIComponent:不會進行編碼的字符有71個:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

問題:

  ajax.get ( url+'?k1'=v1+'&k2'=v2+'&k3'=v3, ... ); 

  由於URL只進行了encodeURI編碼,所以想提交的參數有searchWord = a+b時,變成了a b。 

解決辦法: 

  ajax.post( url, params,....) 

  其中params是對象。 

  原因:如果參數是對象或數組時,組件庫已經幫你進行encodeURIComponent了。 而如果你僅僅是字符串,組件庫什麼也沒做,所以到後端時就把特殊字符給過濾了。 

  encodeURI()用法

  該方法不會對 ASCII 字母和數字進行編碼,也不會對這些 ASCII 標點符號進行編碼: - _ . ! ~ * ' ( ) 。 

  該方法的目的是對 URI 進行完整的編碼,因此對以下在 URI 中具有特殊含義的 ASCII 標點符號,encodeURI() 函數是不會進行轉義的:;/?:@&=+$,# 

  提示:如果 URI 組件中含有分隔符,比如 ? 和 #,則應當使用 encodeURIComponent() 方法分別對各組件進行編碼。

  例子:

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />") 
document.write(encodeURI("http://www.w3school.com.cn/My first/")) 
document.write(encodeURI(",/?:@&=+$#")) 
//批注:只轉換域名後面的部分,並且對,/?:@&=+$#不處理。 
// http://www.w3school.com.cn 
// http://www.w3school.com.cn/My%20first/ 
// ,/?:@&=+$#  

  decodeURI() 函數可對 encodeURI() 函數編碼過的 URI 進行解碼。

  encodeURIComponent()用法 

  該方法不會對 ASCII 字母和數字進行編碼,也不會對這些 ASCII 標點符號進行編碼: - _ . ! ~ * ' ( ) 。 

  其他字符(比如 :;/?:@&=+$,# 這些用於分隔 URI 組件的標點符號),都是由一個或多個十六進制的轉義序列替換的。

  提示:請注意 encodeURIComponent() 函數 與 encodeURI() 函數的區別之處,前者假定它的參數是 URI 的一部分(比如協議、主機名、路徑或查詢字符串)。因此 encodeURIComponent() 函數將轉義用於分隔 URI 各個部分的標點符號。

  例子:

document.write(encodeURIComponent("http://www.w3school.com.cn")) 
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")) 
document.write(encodeURIComponent(",/?:@&=+$#")) 
//對比 
// http%3A%2F%2Fwww.w3school.com.cn 
// http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
// %2C%2F%3F%3A%40%26%3D%2B%24%23  

  decodeURIComponent() 函數可對 encodeURIComponent() 函數編碼的 URI 進行解碼。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved