欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SpringMVC中静态html页面之间带参数访问方式总结

程序员文章站 2022-05-31 10:50:00
...

交流学习真的是一个很不错的习惯,遇见问题一个人闷头学、闷头想,就算是网上资源千万,获得的也只是一叶扁舟
也许遇见的这个问题不是很难也许很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适用于配套框架的组件间跳转。
SpringMVC中静态html页面之间带参数访问方式总结
在组件化开发中,我们使用

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

对应组件中进行获取参数。

let id = this.$route.param.id

由于我是html文件,用类似方式实现不知道是否可以,有待验证,如有人知道请留言讲解。

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