DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js分解url參數(面向對象-極簡主義法應用)
js分解url參數(面向對象-極簡主義法應用)
編輯:關於JavaScript     
修改前:
復制代碼 代碼如下:
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
function parseQueryString(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
var obj=new parseQueryString(url);
alert(obj.key1)
</script>

修改後:
復制代碼 代碼如下:
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
var pQString={
createNew:function(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
}
var obj=new pQString.createNew(url);
alert(obj.key1)
</script>

感謝 草根程序猿很厲害把這個方法重寫了一下,更嚴密,高效了,最後面在些再學習一下!!!
復制代碼 代碼如下:
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取,比我之前的split()方法效率高
}
var result = {}, //創建一個對象,用於存name,和value
queryString =url || location.search.substring(1), //location.search設置或返回從問號 (?) 開始的 URL(查詢部分)。
re = /([^&=]+)=([^&]*)/g, //正則,具體不會用
m;
while (m = re.exec(queryString)) { //exec()正則表達式的匹配,具體不會用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對編碼後的 URI 進行解碼
}
return result;
}
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>

注:
1、substr()與substring(start,stop) ,提取字符串中介於兩個指定下標之間的字符。
重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負的參數。
參見http://www.jb51.net/w3school/js/jsref_substring.htm
2、location.search.substring(1) ,location.search設置或返回從問號 (?) 開始的 URL(查詢部分)。
參見http://www.jb51.net/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用於檢索字符串中的正則表達式的匹配。太強大了,還不會用
參考http://www.jb51.net/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對編碼後的 URI 進行解碼。
參見http://www.jb51.net/w3school/js/jsref_exec_regexp.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved