SpringMVC中靜態html頁面之間帶參數訪問方式總結

交流學習真的是一個很不錯的習慣，遇見問題一個人悶頭學、悶頭想，就算是網上資源千萬，獲得的也只是一葉扁舟
也許遇見的這個問題不是很難也許很low，但是通過和同學交流，向老師、大佬請教，QQ微信學習羣交流，博客查看……，獲得的遠比解決一個小問題多的多的知識，還有不同思考方式這樣的軟知識。
和你的夥伴交流起來，這個過程可能會覺得沒有必要、感到浪費時間，但是交流完真的收穫頗多。

場景

說明一下項目服務端SSM實現，客戶端用html+js實現，請求數據用異步交互。
springmvc中， 一個html頁面要帶參數跳轉到另一個html頁面， 注意是直接跳html頁面（不經過controller，還要帶參數），很多建議我使用異步的ajax，把參數帶過去，但是ajax還是訪問了controller，是屬於當前頁面的局部刷新，無法進行頁面跳轉。所以這種方式pass

解決1

使用js對要跳轉的超鏈接進行路徑賦值，並且傳入動態的參數。

window.location="page-single-topic.html?id="+id

在目標html頁面進行獲取值即可。

<script src="js/getParameter.js"></script>
<script>
	function(){
		var id = getParameter("id");
		//……
	}
</script>

這種方式獲取這個參數時要進行處理，給出處理方法，getParameter.js

//根據傳遞過來的參數name獲取對應的值
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

類似的處理參數的方法還有getUrlParam.js。

UrlParam = function() { // url參數
  var data, index;    
  (function init() {    
    data = [];    //值，如[["1","2"],["zhangsan"],["lisi"]]
    index = {};   //鍵:索引，如{a:0,b:1,c:2}
    var u = window.location.search.substr(1);    
    if (u != '') {    
      var params = decodeURIComponent(u).split('&');
      for (var i = 0, len = params.length; i < len; i++) {
        if (params[i] != '') {
          var p = params[i].split("=");
          if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =
            data.push(['']);    
            index[p[0]] = data.length - 1;    
          } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 捨棄
            continue;
          } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa    
            data.push([p[1]]);    
            index[p[0]] = data.length - 1;    
          } else {// c=aaa    
            data[index[p[0]]].push(p[1]);    
          }    
        }    
      }    
    }    
  })();    
  return {    
    // 獲得參數,類似request.getParameter()    
    param : function(o) { // o: 參數名或者參數次序
      try {    
        return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);    
      } catch (e) {    
      }    
    },    
    //獲得參數組, 類似request.getParameterValues()    
    paramValues : function(o) { //  o: 參數名或者參數次序
      try {    
        return (typeof(o) == 'number' ? data[o] : data[index[o]]);    
      } catch (e) {}    
    },    
    //是否含有paramName參數
    hasParam : function(paramName) {
      return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;
    },    
    // 獲得參數Map ,類似request.getParameterMap()    
    paramMap : function() {
      var map = {};    
      try {    
        for (var p in index) {  map[p] = data[index[p]];  }    
      } catch (e) {}    
      return map;    
    }    
  }    
}();    

此代碼參照：http://blog.csdn.net/caoyuan10036/article/details/7227214

//調用
<script src="getUrlParam.js"></script>
<script type="text/javascript">
    var name=UrlParm.parm("name");
    alert(name);
</script>

解決2

使用jQuery提供的cookie.js進行傳遞，也就是把值存在cookie中，然後從cookie中再獲取。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
	//添加cookie
    $.cookie("id","11111111");
</script>

目標html進行獲取參數

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
	//讀取cookie
	let param = $.cookie("id");
</script>

cookie.js看參考http://blog.csdn.net/csdn_ds/article/details/78022177

解決3（待檢測）

vue的router組件可以進行路由跳轉，但是router適用於配套框架的組件間跳轉。

在組件化開發中，我們使用

<a :href="'組件名'+id"></a> 

對應組件中進行獲取參數。

let id = this.$route.param.id

由於我是html文件，用類似方式實現不知道是否可以，有待驗證，如有人知道請留言講解。

<a :href="'page-single-topic.html'+id"></a>