網頁之間的參數傳遞

不知道有多少人跟我一樣, 在剛接觸 Web Development(javascript) 時, 最想知道的答案的三大問題之一就是: 我要怎麼傳參數到另一個網頁呀 ?

就我目前的學習成果裡, 用了兩種方法, 而這兩種方法適用的地方不同.

一般的網頁利用 location.href

一般網頁是指像以 <a> 開啟的頁面, 可以 href 連結後方加入?的參數, 就像呼叫後端php程式一樣:

<a href="http://domain.com/new_page.html?name=vito&country=taiwan">new page</a>

在new_page.html 被載入後,即可讀取 location.href 取得完整 URL, 然後再利用 parseQuery 做解析工作, 得出參數.

function parseQuery ( query ) {
   var Params = new Object ();
   if ( ! query ) return Params; // return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) continue;
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/\+/g, ' ');
      Params[key] = val;
   }
   return Params;
}

var params = parseQuery(location.href.replace(/^[^\?]+\??/,''));
v1 = params["name"]  //  vito
v2 = params["country"]  //  taiwan

註:parseQuery是我在 jQuery 的一個 plugin 內發掘出來的 function, 蠻好用的. 不過後來發現在一些 blog 都有提到這個 function, 所以真正來源目前我不清楚.

AJAX 載入的網頁, 不可使用 location.href, 可運用全域變數

由於使用 ajax 載入的網頁, 並未真的更新網頁, 因此 location.href 不會改變, 也就無法利用 location.href 了, 但也因此表示在 javascript 使用宣告的變數, new_page.html 是可以讀得到的(就像在同一個網頁), 當然, 我們要將全域變數管好啦.

AJAX 載入的網頁, 在 tag 內定義自訂的屬性, 當作參數

很多時候是藉由 click <a>, <img> 等 tag 觸發一個 function, 使用 ajax 技術載入一個網頁, 此時可在這個 tag 定義特殊的屬性, 當 click 觸發 function 時, 再讀取這個 element 的屬性值, 對載入的網頁做變化.

附註:
使用 ajax 載入網頁很困難嗎? 非也, 運用 jQuery, 只要一行 ajax 就收工了:

$("#product_wrapper").load("product_page.html");

假設 html 有個 div tag, id="product_wrapper".
以上 code 的意思是, 將 product_page.html 載入到 id="product_wrapper" 的 element 內.