快捷導(dǎo)航

JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié)

更新時間：2025年05月08日 09:48:00 作者：二川bro

本文主要介紹了JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié),包括獲取整個URL字符串和獲取URL中的參數(shù)值,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天就遇到這樣一個問題，簡單描述就是需要從URL中獲取所傳遞的參數(shù)。如果使用后臺語言我們都會有很多中方法來獲取，但是網(wǎng)站的中的所有數(shù)據(jù)都是通過AJAX進(jìn)行傳遞的，所以需要使用JS進(jìn)行獲取參數(shù)，然后傳遞給后臺。在網(wǎng)上查到了多種方式，在這里進(jìn)行一下總結(jié)記錄，方便以后學(xué)習(xí)使用。

1、獲取整個URL字符串

要想獲取URL中的參數(shù)，首先我們就要獲取到整個URL字符串。我們使用：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua_wei這個URL為例。

① 獲取(或設(shè)置) URL 的協(xié)議部分：window.location.protocol

    //window.location.protocol設(shè)置或獲取 URL 的協(xié)議部分
    var test = window.location.protocol;
    alert(test);
    //返回彈出：http:

② 獲取(或設(shè)置) URL 的主機(jī)部分：window.location.host

    //window.location.host設(shè)置或獲取 URL 的主機(jī)部分
    var test = window.location.host;
    alert(test);
    //返回彈出：www.zhihuaw.com

③ 獲取(或設(shè)置) URL 關(guān)聯(lián)的端口號碼：window.location.port

    //window.location.port設(shè)置或獲取與 URL 關(guān)聯(lián)的端口號碼
    var test = window.location.port;
    alert(test);
    //返回彈出：空字符(如果采用默認(rèn)的80端口(即使添加了:80)，那么返回值并不是默認(rèn)的80而是空字符)

④ 獲取(或設(shè)置) URL 的路徑部分也就是文件地址：window.location.pathname

    //window.location.pathname設(shè)置或獲取 URL 的路徑部分（就是文件地址）
    var test = window.location.pathname;
    alert(test);
    //返回彈出：/wap/tmpl/member/member.html

⑤ 獲取(或設(shè)置) URL屬性中跟在問號后面的部分：window.location.search

    //window.location.search設(shè)置或獲取 href 屬性中跟在問號后面的部分
    var test = window.location.search;
    alert(test);
    //返回彈出：?token=zhihua_wei

⑥ 獲取(或設(shè)置) URL屬性中在井號“#”后面的分段：window.location.hash

    //window.location.hash設(shè)置或獲取 href 屬性中在井號“#”后面的分段
    var test = window.location.hash;
    alert(test);
    //返回彈出：空字符(因?yàn)閡rl中沒有)

⑦ 獲取(或設(shè)置) 整個 URL字符串：window.location.href

    //window.location.href設(shè)置或獲取整個 URL字符串
    var test = window.location.href;
    alert(test);
    //返回彈出：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua_wei

2、獲取URL中的參數(shù)值

獲取了URL字符串之后就是獲取URL字符串中的參數(shù)數(shù)據(jù)信息。下面是幾種獲取參數(shù)的方法：

① 同正則表達(dá)式對比獲取參數(shù)值

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

② split拆分法

    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]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var Request = new Object();
    Request = GetRequest();
    // var id=Request["id"]; 
    // 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'];

③ 單個參數(shù)的獲取方法

    function GetRequest() {
        var url = location.search; //獲取url中"?"符后的字串
        if (url.indexOf("?") != -1) {  //判斷是否有參數(shù)
            var str = url.substr(1); //從第一個字符開始 因?yàn)榈?個是?號 獲取所有除問號的所有符串
            strs = str.split("=");  //用等號進(jìn)行分隔 （因?yàn)橹乐挥幸粋€參數(shù) 所以直接用等號進(jìn)分隔 如果有多個參數(shù) 要用&號分隔 再用等號進(jìn)行分隔）
            alert(strs[1]);     //直接彈出第一個參數(shù) （如果有多個參數(shù) 還要進(jìn)行循環(huán)的）
        }
    }

到此這篇關(guān)于JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié)的文章就介紹到這了,更多相關(guān)JS獲取URL參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: