iT邦幫忙

9

[筆記][JavaScript]取得網址後帶的參數(QueryString)

有時候我們會用在網址後面帶參數的做法來在網頁間傳遞一些簡單的資料(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<=ary.length-1;i++)
    {
        //如果資料名稱為id的話那就把他取出來
        if(ary[i].split('=')[0] == 'id')
            id = ary[i].split('=')[1];
    }
    
}

Function:
1.indexOf()
A.indexOf('B');
會回傳在A字串中B第一次出現的位置(第一個位置為0),如果在A字串中沒有B那會回傳-1。

2.split()
A.split('B');
會把A字串以B做切割,各自分成幾個小字串,通常會以陣列去裝被切割的字串。

參考文章:
1.http://www.wibibi.com/info.php?tid=82
2.http://help.i2yes.com/?q=node/234


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
小魚
iT邦大師 1 級 ‧ 2017-10-11 11:55:29

所以是用字串的方式處理,
不過通常不會在前端做這種事吧...

看更多先前的回應...收起先前的回應...
神Q超人 iT邦研究生 5 級 ‧ 2017-10-11 19:30:05 檢舉

對!主要是利用他帶QueryString的規則去處理!

是因為剛好做到一個功能,是再訂單資料維護中點了某張訂單內的產品名稱,就要跳到產品基本資料中顯示該產品的詳細資料。

因為function再產品基本資料都寫好了,想說把產品編號帶在網址後面,到該頁面再直接把編號丟到之前寫好的Function裡執行帶出資料。

只是目前我想不出有什麼好的方法才想到這樣處理,如果有更好的方法當然還是想學習/images/emoticon/emoticon02.gif

小魚 iT邦大師 1 級 ‧ 2017-10-12 00:37:05 檢舉

所以是不經過後端的意思嗎?

神Q超人 iT邦研究生 5 級 ‧ 2017-10-12 13:32:13 檢舉

對哦 雖然我在寫的也是Webform但是我的方式比較接近下面這篇文章的作法,https://ithelp.ithome.com.tw/articles/10135211

我在aspx.cs裡面沒有任何的程式碼,控制項是由HTML及JavaScript去做的,所以如果沒有從.aspx(前端)用AJAX呼叫.ashx(後端)的話,我的後端(.ashx)是不會執行任何事件的,他不像aspx.cs的後端有Page_Load的事件,可以在網頁載入時執行。

小魚 iT邦大師 1 級 ‧ 2017-10-13 00:35:54 檢舉

是喔,我比較喜歡在cs做動作,包成dll比較不容易被看到

神Q超人 iT邦研究生 5 級 ‧ 2017-10-14 23:43:11 檢舉

哈哈 我以前也都直接寫cs,是換公司後才看見這個了新的做法!

1
小碼農米爾
iT邦高手 1 級 ‧ 2017-10-11 13:07:21

有看過寫成 Regex 的方式。
How can I get query string values in JavaScript?

神Q超人 iT邦研究生 5 級 ‧ 2017-10-11 19:33:09 檢舉

哦哦!用正規表達式處理也是一個方法,之前再找方法時沒注意到這篇!找機會在來研究一下正規表達式XD。

謝謝分享哦!

我要留言

立即登入留言