页面之间传递参数一般都是后端进行处理的,根据参数加载不同数据,显示不同内容,其实前端静态页面也能实现传参,只不过安全性不是太高,但是还是很实用的,例如点击不同月份,显示点击月的对应的文章列表,这样的场景参数就是用来实现“筛选”功能了!我还经常用这个传参实现,点击不同城市,切换相对应的城市地图这样一个需求!当然,你更需要在实际开发中找到最佳的用途,使用范围很广,不过涉及安全支付等千万别用这个方法,因为太不安全了!

下面讲一下我的案例-点击月份加载不同的数据:

第一页代码,主要用于交互,处理点击前的效果,及传递参数!

HTML:

<div class="box">
	<p>1月</p>
	<p>2月</p>
	<p>3月</p>
	<p>4月</p>
</div>		

JS:

var box = document.getElementsByClassName("box")[0];
var boxp = box.getElementsByTagName("p");
for(var i = 0;i<boxp.length;i++){
	boxp[i].index = i;
	boxp[i].onclick = function(){
		var txt = boxp[this.index].innerHTML;
//                  console.log(txt)
                    go(txt);
	}
}

function go(key){
	var hrefs = "http://127.0.0.1:8020/html/jspage/001.html?";
	var query = "mouth="+key;
	window.location.href = hrefs+query;
}

通过GO函数,你发现页面传参其实就是用url的query进行传递的,点击不同月份,动态修改跳转页的query值,然后跳转页再捕获url传递过来的query的值,根据这个值,显示不同内容!

跳转页代码-捕获query关键词函数最好放置到页面顶部,先判断值,再处理:

function getUrlVars() {
     var vars = [], hash;
     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
     for (var i = 0; i < hashes.length; i++) {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
     }
     return vars;
}
var params = getUrlVars();
var m = decodeURI(params.mouth);
var reg = /[\u4E00-\u9FA5]/g;
mm = Number(m.replace(reg,""))-1;

mm就是我们页面的关键词了,后期通过这个关键词改变页面的数据就可以了!

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。