html-静态页面之间传参的方法

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

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

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

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就是我们页面的关键词了，后期通过这个关键词改变页面的数据就可以了！