Javascript帶參URL

在Web開發(fā)中，我們經(jīng)常需要給URL帶上參數(shù)，以便在頁面之間傳遞數(shù)據(jù)。Javascript是一種非常流行的語言，它可以方便地實(shí)現(xiàn)在URL中設(shè)定帶參。

每個(gè)URL都有一個(gè)查詢字符串(Query String)，這個(gè)字符串可以用來傳遞參數(shù)。它由一個(gè)問號后面跟著一個(gè)或多個(gè)鍵值對組成，每個(gè)鍵值對之間用"&"符號分隔。

http://www.example.com?name=michael&age=30

上面的URL中，name和age就是兩個(gè)參數(shù)，它們的值分別是michael和30。在Javascript中，我們可以通過window.location.search獲取當(dāng)前URL的查詢字符串，然后用字符串處理函數(shù)來解析它。

// 獲取查詢字符串
var querystring = window.location.search;
// 去掉開頭的問號
querystring = querystring.substring(1);
// 按照"&"分隔字符串
var parameters = querystring.split("&");
// 將鍵值對解析出來
var result = {};
for (var i = 0; i< parameters.length; i++) {
var parts = parameters[i].split("=");
var key = parts[0];
var value = decodeURIComponent(parts[1]);
result[key] = value;
}
// 使用解析出來的參數(shù)
console.log(result.name);
console.log(result.age);

上面的代碼演示了如何從查詢字符串中解析出參數(shù)。首先使用window.location.search獲取查詢字符串，然后去掉開頭的問號，再用split函數(shù)按照"&"分隔字符串。接著將每個(gè)鍵值對解析出來，存儲在一個(gè)對象中。最后，就可以使用這個(gè)對象來訪問參數(shù)值。

如果我們想要在Javascript中動態(tài)地創(chuàng)建帶參URL，可以使用以下代碼：

var url = "http://www.example.com?" + encodeURIComponent("name") + "=" + encodeURIComponent("michael") + "&" + encodeURIComponent("age") + "=" + encodeURIComponent("30");
window.location.href = url;

上面的代碼首先創(chuàng)建一個(gè)URL，其中包含了兩個(gè)參數(shù)name和age。為了防止參數(shù)值中出現(xiàn)特殊字符，我們使用了encodeURIComponent函數(shù)對它們進(jìn)行編碼。最后，將這個(gè)URL賦值給window.location.href，就可以跳轉(zhuǎn)到這個(gè)頁面。

Javascript帶參URL用來傳遞數(shù)據(jù)非常方便，可以讓頁面之間實(shí)現(xiàn)簡單的參數(shù)傳遞，實(shí)現(xiàn)動態(tài)跳轉(zhuǎn)。在實(shí)際開發(fā)中，我們需要對URL的長度做出限制，以免傳遞的數(shù)據(jù)過多導(dǎo)致URL過長。另外，也需要對參數(shù)值進(jìn)行安全性驗(yàn)證，防止黑客攻擊。