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>