JavaScript 取得網址參數(QueryString)

2 月 20, 2019 | | 0 comments

有時候我們會用在網址後面帶參數的做法來在網頁間傳遞一些簡單的資料(QueryString),例如:index.aspx?id=U001&name=GQSM,而JavaScript目前沒有Function可以直接取到後方的資料,所以就得使用一些方式。

//先取得網址字串,假設此頁網址為「index.aspx?id=U001&name=GQSM」
var url = location.href;

//再來用去尋找網址列中是否有資料傳遞(QueryString)
if(url.indexOf('?')!=-1)
{
    //之後去分割字串把分割後的字串放進陣列中
    var ary1 = url.split('?');
    //此時ary1裡的內容為:
    //ary1[0] = 'index.aspx',ary2[1] = 'id=U001&name=GQSM'

    //下一步把後方傳遞的每組資料各自分割
    var ary2 = ary1[1].split('&');
    //此時ary2裡的內容為:
    //ary2[0] = 'id=U001',ary2[1] = 'name=GQSM'

    //最後如果我們要找id的資料就直接取ary[0]下手,name的話就是ary[1]
    var ary3 = ary2[0].split('=');
    //此時ary3裡的內容為:
    //ary3[0] = 'id',ary3[1] = 'U001'

    //取得id值
    var id = ary3[1];

}

以上的方法式為了能看的懂所以一步步做解析,一般在實務上不需要撰寫如此條列式的程式,通常會寫得更簡潔,或是利用for迴圈來取得自己需要的資料,例如以下:

//先取得網址字串,假設此頁網址為「index.aspx?id=U001&name=GQSM」
var url = location.href;

//再來用去尋找網址列中是否有資料傳遞(QueryString)
if(url.indexOf('?')!=-1)
{
    var id = ;
    //在此直接將各自的參數資料切割放進ary中
    var ary = url.split('?')[1].split('&');
    //此時ary的內容為:
    //ary[0] = 'id=U001',ary[1] = 'name=GQSM'

    //下迴圈去搜尋每個資料參數
    for(i=0;i

Function:

  1. indexOf()
    A.indexOf(\’B\’);
    會回傳在A字串中B第一次出現的位置(第一個位置為0),如果在A字串中沒有B那會回傳-1。
  2. split()
    A.split(\’B\’);
    會把A字串以B做切割,各自分成幾個小字串,通常會以陣列去裝被切割的字串。

分享文章:https://ithelp.ithome.com.tw/articles/10190254