1. 程式人生 > >拼接字串到url跳轉頁面後解析

拼接字串到url跳轉頁面後解析

什麼時候需要前端頁面之間互相傳遞資訊呢?
比如說(原諒我又要用最愛的淘寶舉個栗子了,哈哈):

這裡寫圖片描述

我們在這個搜尋框裡面輸入我們想搜尋的內容,然後點選搜尋,跳轉頁面之後會變成這個樣子:

這裡寫圖片描述

我們發現我們我們在上一個頁面輸入的資訊被帶到了跳轉到的新頁面裡面。
比較神奇吧~~有沒有magic!哈哈。開個玩笑~
這樣在某些兩個頁面需要互相通訊的時候就不用去向後臺請求了。
那麼問題來了,怎麼實現呢?
其實很簡單,在兩個頁面用不同的函式利用url進行字串拼接或讀取就可以了。

重點如下:

  • 要在下一個頁面獲取的話就要先在本頁面吧把需資訊先拼接到url上,這樣下一個頁面才能去解析。
    (這個函式稍後補上)

  • 好了,怎樣來吧拿到的url裡面的資訊解析並把需要的內容傳到相應的位置呢?

var args = getQueryStringArgs();
function getQueryStringArgs () {    //取得查詢字串並去掉開頭的問號
               var  qs = (location.search.length>0 ? location.search.substring(1) : ""),
                //location.search 獲取到url問號後的所有查詢字串值,search得到的是url中query部分
                //substring()返回一個從指定位置開始的指定長度的子字串這裡設定為1,是為了把url中的?號去掉
args = {}, //儲存資料的物件 items = qs.length ? qs.split("&") : [], //取得查詢字串中每對鍵值對,儲存到items中 //split()將一個字串分割為子字串,然後將結果作為字串陣列返回這裡就是把query部分以&為分割符 item = null, name = null, value = null
, i = 0, len = items.length; for(i = 0; i<len; i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if(name.length){ args[name] = value; } } return args; }

收尾:真是神奇的函式啊。。。