location物件屬性及查詢字串的處理
阿新 • • 發佈:2018-12-20
Global(全域性)物件中的encodeURL()和encodeURIComponent()方法可以對URI進行編碼,以便傳送給瀏覽器。有效的URI中不能包含某些字元,比如說空格。而這兩個URI編碼方法可以對URI進行編碼,它們同特殊的UTF-8編碼替換所有的無效字元,從而讓瀏覽器可以接收和理解,下面以表格的形式來表達它們的作用和區別:
encodeURL() | encodeURIComponent() | |
主要區別 | 不會對本身屬於URI特殊字元進行編碼,例如冒號、正斜槓、問號和井字號(“:”、“/”、“?”、“#”.....) | 會對它所處理的URI中任何非標準字元字元進行編碼 |
例子 |
如圖 |
|
作用 | encodeURI()主要用於整個URI的編碼 | encodeURIComponent()主要用於某個URI片段的編碼,如例中的問號之後的片段。Component(譯:成分、元件); |
相應的解碼方法 | decondeURI() | decodeURIComponent() |
備註:在實際運用中,常需要對查詢字串進行編碼,所以我們運用encodeURIComponent()的情況比較多; |
<script type="text/javascript"> var uri="https://mp.csdn net/post edit?not_checkout=1"; document.write(uri+"<br />"); //https://mp.csdn net/post edit?not_checkout=1 document.write(encodeURI(uri)+"<br />"); //https://mp%20csdn%20net/postedit?not_checkout=1 document.write(encodeURIComponent(uri)); //https%3A%2F%2Fmp%20csdn%20net%2Fpostedit%3Fnot_checkout%3D1 </script>
location物件是常用的物件,它提供了與當前視窗中載入的文件的有關資訊,還提供了一些導航功能。事實上,location物件既是window物件的屬性,也是document物件的屬性;換句話說,window.location和doument.location引用的是同一個物件。location儲存著當前文件的資訊,並且可以將URI解析成獨立的片段,通過以下屬性可以訪問且獲得這個片段:
屬性名 | 例子 | 說明 | 片段名稱及作用 |
hash | "#content" | 返回URI中的hash(#號之後的零或多個字元),如果URI中不包含雜湊,則返回空的字串; | 片段識別符號:在URI的末端,通常可標記出以獲取資源中的子資源(文件內的某個位置)。為URI中的可選項; |
host | "www.wrox.com:80" | 返回伺服器名稱和埠(如果有); | 伺服器地址的冒號之後為伺服器埠號,伺服器地址可以是類似wrox.com這種可解析的域名,或是192.168.1.1這類的IPv4地址名,還可以是[0:0:0:0:0:0:0:1]這樣用方括號括起來的IPv6地址名; |
hostname | "www.wrox.com" | 單獨返回伺服器名稱; | 返回不帶埠號的伺服器名稱 |
pathname (譯:路徑名) |
"/WileyCDA/" | 返回URI中的目錄和(或)檔名; | 帶層次的檔案路徑:指定伺服器上的檔案路徑來定位特指的資源。 |
port | "8080" | 返回URI中指定的埠號。如果URI中不包含埠號,則這個屬性返回空字串; | 埠號:指定伺服器連線的網路埠號,此項在URI中也是可選部分;若使用者省略則自動使用預設埠號; |
protocol | "http:" | 返回頁面使用的協議,通常為http:或https:; | 協議方案名:不區分字母大小寫,最後跟一個冒號;也可以使用data:或javascript:這類指定資料或指令碼程式的方案名; |
search | "?q=javascript" | 返回URI的查詢字串。這個字串以問號開頭; | 查詢字串:針對已指定的檔案路徑內的資源,可以使用查詢字串傳入任意的引數。此項可選。 |
雖然通過上面的location物件的屬性可以獲取URI中的大多數資訊,但是獲取查詢字串的屬性並不方便,因為location.search獲取的查詢字串還需要再進行處理才可以使用,所以可以建立這樣一個函式來處理;
<script type="text/javascript">
function getQueryStringArgs(){
//取得查詢字串,並去掉開頭的問號之後的所有字元;
var qs=(location.search.length>0?location.search.substring(1):""),
//建立一個用來儲存資料的物件;
args={},
//如果qs的長度不是0,在&符號處將字串分割開,化為陣列;
items=qs.length?qs.split("&"):[],
item=null,
name=null,
value=null,
i=0,
len=itmes.length;
for(i=0;i<len;i++){
//遍歷items陣列,把items陣列中的每一項在“=”處分開,化為陣列,陣列只有兩項;
item=items[i].split("=",2);
name=decodeURIComponent(item[0]);
//查詢字串有可能是被編碼過的,所以使用decodeURIComponent處理
value=decodeURIComponent(item[1]);
//將不是空值的name值作為屬性賦給args,以相應的value為屬性值;
if(name.length){
args[name]=value;
}
}
return args;
}
</script>
例
假設本地地址location的uri為https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=CSDN
獲取到的查詢字串為 ?tn=monline_3_dg&ie=utf-8&wd=CSDN
去掉問號為 tn=monline_3_dg&ie=utf-8&wd=CSDN
第一次使用split("&")獲得陣列items ["tn=monline_3_dg","ie=utf-8","wd=CSDN"]
每次遍歷陣列會得到一個元素項數為2的陣列item例如: ["tn","monline_3_dg"]....
將第一項item[0]作為名,第二項item[1]作為值,增強arges物件;