JSON 解析URL參數(shù)

2021-08-26 15:53 更新

使用JS函數(shù)將URL參數(shù)解析為JSON對象

問題:請編寫一個JavaScript函數(shù)parseQueryString,它的用途是把URL參數(shù)解析為一個對象。
例如:var obj=parseQueryString(url);

創(chuàng)建對象

創(chuàng)建對象的三種形式:

一:

var Person=new Object();
Person.name="Sun";
Person.age=24;


二:

var Person=new Object();
Person["name"]="Sun";
Person["age"]=24;


三:

對象字面量表達(dá)式

var Person={
name: "Sun",
age: 24
}


PS:
1、在這個例子中,比較適合使用第二種形式,向obj中添加元素
2、split("&") , 如果url只有一個參數(shù)的時候,沒有“&”的時候,也不會報錯,只會返回array[0]

function parseQueryString(url) {
    var obj = {};
    var keyvalue = [];
    var key = "",
        value = "";
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    for (var i in paraString) {
        keyvalue = paraString[i].split("=");
        key = keyvalue[0];
        value = keyvalue[1];
        obj[key] = value;
    }
    return obj;
}

以下介紹了JS根據(jù)key值獲取URL中的參數(shù)值及把URL的參數(shù)轉(zhuǎn)換成json對象,js通過兩種方式獲取url傳遞參數(shù),代碼

示例一:

//把url的參數(shù)部分轉(zhuǎn)化成json對象 

 parseQueryString: function(url) {
     var reg_url = /^[^/?]+/ ? ([\w\W] + ) $ / ,
         reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
         arr_url = reg_url.exec(url),
         ret = {};
     if (arr_url && arr_url[1]) {
         var str_para = arr_url[1],
             result;
         while ((result = reg_para.exec(str_para)) != null) {
             ret[result[1]] = result[2];
         }
     }
     return ret;
 }

// 通過key獲取url中的參數(shù)值

 getQueryString: function(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

示例二:

js通過兩種方法獲取url傳遞參數(shù):

js獲取url傳遞參數(shù)方法一:

 這里是一個獲取URL帶QUESTRING參數(shù)的JAVASCRIPT客戶端解決方案,相當(dāng)于asp的request.querystring,PHP的$_GET
函數(shù):

function GetRequest() {
    var url = location.search; //獲取url中"?"符后的字串 
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
        }
    }
    return theRequest;
}

然后我們通過調(diào)用此函數(shù)獲取對應(yīng)參數(shù)值:

var Request = new Object();
Request = GetRequest();
var 參數(shù)1,參數(shù)2,參數(shù)3,參數(shù)N;
參數(shù)1 = Request[''參數(shù)1''];
參數(shù)2 = Request[''參數(shù)2''];
參數(shù)3 = Request[''參數(shù)3''];
參數(shù)N = Request[''參數(shù)N''];

以此獲取url串中所帶的同名參數(shù)

js獲取url傳遞參數(shù)方法二 正則分析法:

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return (r[2]);
    return null;
}
alert(GetQueryString("參數(shù)名1"));
alert(GetQueryString("參數(shù)名2"));
alert(GetQueryString("參數(shù)名3"));

其他參數(shù)獲取介紹:

//設(shè)置或獲取對象指定的文件名或路徑。

alert(window.location.pathname);

//設(shè)置或獲取整個 URL 為字符串。

alert(window.location.href);

//設(shè)置或獲取與 URL 關(guān)聯(lián)的端口號碼。

alert(window.location.port);

//設(shè)置或獲取 URL 的協(xié)議部分。

alert(window.location.protocol);

//設(shè)置或獲取 href 屬性中在井號“#”后面的分段。

alert(window.location.hash);

//設(shè)置或獲取 location 或 URL 的 hostname 和 port 號碼。

alert(window.location.host);

//設(shè)置或獲取 href 屬性中跟在問號后面的部分。

alert(window.location.search);
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號