js实现页面传输

传输数据的页面

//跳转到详情页matte-lipstick.html
$(".product-pic").each(function(index){
	$(this).click(function () {
		myAjax("get","js/matte-lipstick.json","",true,callBack);
		function callBack(str){
			let myJson = JSON.parse(str);
			var cName = myJson[index].chineseName;//中文名
			var eName = myJson[index].englishName;//英文名
			var productColor = myJson[index].color;//色号
			var pic = myJson[index].pic;//图片路径
			var quality = myJson[index].quality;//款式
			var fontColor = myJson[index].fontColor;//字体颜色
			location.href='matte-lipstick.html?cName='+cName+'&eName=' + encodeURI(eName)+'&productColor=' + encodeURI(productColor)+'&pic=' + encodeURI(pic)+'&quality=' + encodeURI(quality)+'&fontColor=' + encodeURI(fontColor);
		}
	})
})

接收数据的界面
其实就是通过location.href把你需要传输的内容拼接到url地址栏里再通过location.search获取到？后面的值然后通过&专成数组这样你就可以得到你需要的数据了

//获取bullet.html传过来的数据
function GetRequest(){
    var url = location.search; //获取url中"?"符后的字串  
    var theRequest = new Object();  
    if (url.indexOf("?") != -1) {  
        var str = url.substr(1);  
        strs = str.split("&");
        //截取&后循环
        for (var i = 0; i < strs.length; i++) {  
            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);  //decodeURI()解决中文乱码
        }  
    }
	$(".particulars-introduce").children().eq(0).text(theRequest.cName);//中文名
	$(".particulars-introduce").children().eq(1).text(theRequest.eName);//英文名
	$(".particulars-introduce").children().eq(3).text(theRequest.productColor);//色号
	$(".particulars-introduce").children().eq(4).text(theRequest.productColor);//色号
	var oFontColor = "#"+theRequest.fontColor//字体颜色
	$(".particulars-introduce").children().eq(4).css("color",oFontColor);
	$(".introduce-quality-span").text(theRequest.quality);//款式
	$(".small-box").css("background","url("+theRequest.pic+") no-repeat");//背景图
	$(".big-box").css("background","url("+theRequest.pic+") no-repeat");//放大镜背景图
	$(".big-box").css("backgroundSize","1216px 1140px");
}
GetRequest();