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>