js獲取url參數值的兩種方式

時間 2019-11-05

標籤獲取 url 參數兩種方式欄目 JavaScript 简体版

原文原文鏈接

用JS獲取地址欄參數的方法（超級簡單）javascript

方法一：採用正則表達式獲取地址欄參數：（強烈推薦，既實用又方便！）html

function GetQueryString(name)java

{正則表達式

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");數組

var r = window.location.search.substr(1).match(reg);瀏覽器

if(r!=null)return unescape(r[2]); return null;服務器

}網絡

// 調用方法post

alert(GetQueryString("參數名1"));this

alert(GetQueryString("參數名2"));

alert(GetQueryString("參數名3"));

下面舉一個例子:

若地址欄URL爲：abc.html?id=123&url=http://www.maidq.com

那麼，但你用上面的方法去調用：alert(GetQueryString("url"));

則會彈出一個對話框：內容就是 http://www.maidq.com

若是用：alert(GetQueryString("id"));那麼彈出的內容就是 123 啦；

固然若是你沒有傳參數的話，好比你的地址是 abc.html 後面沒有參數，那強行輸出調用結果有的時候會報錯：

因此咱們要加一個判斷，判斷咱們請求的參數是否爲空，首先把值賦給一個變量：

var myurl=GetQueryString("url");

if(myurl !=null && myurl.toString().length>1)

{

alert(GetQueryString("url"));

}

這樣就不會報錯了！

方法二：傳統方法

<script type="text/javascript">
function UrlSearch()
{
   var name,value;
   var str=location.href; //取得整個地址欄
   var num=str.indexOf("?")
   str=str.substr(num+1); //取得全部參數   stringvar.substr(start [, length ]

   var arr=str.split("&"); //各個參數放到數組裏
   for(var i=0;i < arr.length;i++){
    num=arr[i].indexOf("=");
    if(num>0){
     name=arr[i].substring(0,num);
     value=arr[i].substr(num+1);
     this[name]=value;
     }
    }
}
var Request=new UrlSearch(); //實例化
alert(Request.id);
</script>

好比說把這個代碼存爲1.html

那麼我要訪問1.html?id=test

這個時候就取到test的值了

在html裏調用
<script type="text/javascript">
var a="http://baidu.com";
</script>
</head>
<body>
<a id="a1" href="">sadfsdfas</a>
<script>
var a1=document.getElementById("a1");
a1.href=a;
</script>

<script type="text/javascript">
var a="http://xxx.com/gg.htm?cctv";
var s=a.indexOf("?");
var t=a.substring(s+1);// t就是?後面的東西了

</script>

stringvar.substr(start [, length ]

返回一個從指定位置開始的指定長度的子字符串。

stringvar

必選項。要提取子字符串的字符串文字或 String 對象。

start

必選項。所需的子字符串的起始位置。字符串中的第一個字符的索引爲 0。

length

可選項。在返回的子字符串中應包括的字符個數。

若是 length 爲 0 或負數，將返回一個空字符串。若是沒有指定該參數，則子字符串將延續到 stringvar 的最後。

下面列舉出一些相關的參數：

str.toLowerCase() 轉換成小寫
str.toUpperCase() 字符串所有轉換成大寫

URL即:統一資源定位符 (Uniform Resource Locator, URL)
完整的URL由這幾個部分構成：
scheme://host:port/path?query#fragment
scheme:通訊協議
經常使用的http,ftp,maito等

host:主機
服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。

port:端口號
整數，可選，省略時使用方案的默認端口，如http的默認端口爲80。

path:路徑
由零或多個"/"符號隔開的字符串，通常用來表示主機上的一個目錄或文件地址。

query:查詢
可選，用於給動態網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技術製做的網頁）傳遞參數，可有多個參數，用"&"符號隔開，每一個參數的名和值用"="符號隔開。

fragment:信息片段
字符串，用於指定網絡資源中的片段。例如一個網頁中有多個名詞解釋，可以使用fragment直接定位到某一名詞解釋。(也稱爲錨點.)

對於這樣一個URL

http://www.maidq.com/index.html?ver=1.0&id=6#imhere

咱們能夠用javascript得到其中的各個部分
1, window.location.href
整個URl字符串(在瀏覽器中就是完整的地址欄)
本例返回值: http://www.maidq.com/index.html?ver=1.0&id=6#imhere

2,window.location.protocol
URL 的協議部分
本例返回值:http:

3,window.location.host
URL 的主機部分
本例返回值:www.maidq.com

4,window.location.port
URL 的端口部分
若是採用默認的80端口(update:即便添加了:80)，那麼返回值並非默認的80而是空字符
本例返回值:""

5,window.location.pathname
URL 的路徑部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html

6,window.location.search
查詢(參數)部分
除了給動態語言賦值之外，咱們一樣能夠給靜態頁面,並使用javascript來得到相信應的參數值
本例返回值:?ver=1.0&id=6

7,window.location.hash 錨點本例返回值:#imhere

相關文章

相關標籤/搜索

參數種類、參數個數

PHP參考手冊

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<