JavaScript獲取URL中參數(shù)querystring的方法詳解
一. 獲取url的querystring參數(shù)
獲取url的querystring參數(shù)的兩種方法如下：
1.1 方法一：正則匹配
//獲取url中的參數(shù)
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目標參數(shù)
var result = window.location.search.substr(1).match(reg); // 對querystring匹配目標參數(shù)
if (result != null) {
return decodeURIComponent(result[2]);
} else {
return null;
}
}
對于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url，獲取 q1 參數(shù)值的方法如下：
var q1 = getQueryString('q1'); // abc
1.2 方法二：split
function getQueryString() {
var qs = location.search.substr(1), // 獲取url中"?"符后的字串
args = {}, // 保存參數(shù)數(shù)據(jù)的對象
items = qs.length ? qs.split("&") : [], // 取得每一個參數(shù)項,
item = null,
len = items.length;
for(var i = 0; i < len; i++) {
item = items[i].split("=");
var name = decodeURIComponent(item[0]),
value = decodeURIComponent(item[1]);
if(name) {
args[name] = value;
}
}
return args;
}
對于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url，獲取 q1 參數(shù)值的方法如下：
var qs = getQueryString(); var q1 = qs["q1"]; // abc
用上面兩種getQueryString()方法都能很好地解決獲取url的querystring參數(shù)問題。就此順便整理一下Location對象，方便日后學習參考。
二. Location對象的屬性
備注：以 http://localhost:80/dir/index.html?q1=abc&q2=efg&q3=h#anchor 為例：
location的這8個屬性都是可讀寫的。
其中，改變location.href會跳轉(zhuǎn)到新的URL頁面，而修改location.hash會跳到當前頁面中錨點位置。
每次修改window.location的屬性（hash除外），頁面都會以新的URL重新加載，并在瀏覽器的歷史紀錄中生成一條新紀錄。
三. Location對象的方法
其中，location.assign(url) 的效果跟下列兩行代碼的效果完全一樣：
window.location = url; location.href = url;
位于 location.reload() 調(diào)用之后的代碼可能會也可能不會執(zhí)行，這取決于網(wǎng)絡(luò)延遲或系統(tǒng)資源等因素。因此，最好將 location.reload() 放在代碼的最后一行。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了JavaScript獲取當前url路徑過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)連連看連線算法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript實現(xiàn)封裝一個快速生成目錄樹的全局腳本
目錄樹可以很好的介紹項目中各文件目錄的用途，幫助讀者了解整個項目結(jié)構(gòu)。本文就來用JavaScript封裝一個快速生成目錄樹的全局腳本，希望對大家有所幫助2023-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在第一章中我提到一個初次看起來可能不是那么好理解的是一個問題：“如果一個元素和他的父元素對于同樣的事件都有事件處理程序，那么哪個會首先執(zhí)行呢？”毫無疑問，看是什么瀏覽器。2010-02-02
這篇文章主要介紹了深入理解 ES6中的 Reflect用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
使用coffeescript編寫node.js項目的方法匯總
Node.js 基于JavaScript編寫應(yīng)用，JavaScript是我的主要開發(fā)語言。CoffeeScript是編譯為JavaScript的編程語言。CoffeeScript是一個非常高階的語言，將JavaScript、Ruby和Python中我最愛的部分結(jié)合在了一起。小編給大家介紹下使用coffeescript編寫node.js項目的方法2015-08-08
這篇文章主要為大家詳細介紹了如何使用發(fā)布訂閱者模式來處理重復的axios請求,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要給大家介紹了關(guān)于ES6中字符串的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
JavaScript彈出新窗口后向父窗口輸出內(nèi)容的方法
這篇文章主要介紹了JavaScript彈出新窗口后向父窗口輸出內(nèi)容的方法,涉及javascript窗口操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04