jquery跳转到对应详情页的方法

  |   Javascript ajax 前端

很多移动电商一般是商品列表页就进入详情页,这是我们知道怎么去写。点击跳转到对应的水票详情页,这我没学过的,其实是我只能尝试能不能写出来的。我花了一天写好了,成功跳转到对应的详情页,心里有一种成功的感觉,真的很爽吧!

思路:
先用ajax获取数据之后,再用localStorage中存储对象数组并读取的方法。

index.js文件

$(function(){
	$.ajax({
			url: "http://weixin.weipe360.com/water_shuidaojia/napi.php?s=/shop/goods_detail&token=99000554006372&ajax=1",
			type: 'GET',
			data:{
				uid:window.localStorage.getItem("uid"),
				goods_id:GetQueryString("goods_id")
				},
			dataType: 'jsonp', //here
			success: function(data) {
				var product_sale = data.data.goods_num;//产品销量
				var img_url = window.localStorage.getItem('img_url');//轮播内容图片
				$('.mui-slider-item').find('img').attr('src',img_url);
				var id = data.data.id;
				var goods_price_list = data.data.goods_price_list;
				var goods_title = data.data.goods_title;
				var goods_price_list = data.data.goods_price_list;
				var goods_water_price = data.data.goods_water_price;
				var goods_water_set = data.data.goods_water_set;
				var goods_rebate = data.data.goods_rebate;
				var goods_num = data.data.goods_num;
				var goods_detail = data.data.goods_detail;
				var goods_type = data.data.goods_type;
				var goods_time = data.data.goods_time;
				var goods_img = data.data.goods_img;
				var goods_img_list = data.data.goods_img_li;
				var goods_gift_id = data.data.goods_gift_id;
				var goods_tickets = data.data.goods_tickets;
				var goods_deposit = data.data.goods_deposit;
				var goods_status = data.data.goods_status;
				var goods_px = data.data.goods_px;
				var goods_xl = data.data.goods_xl;
				var goods_brand_name = data.data.goods_brand_name;
				var goods_monthly_sales = data.data.goods_monthly_sales;

				$('.goods_detail_title').attr('goods_id',id);
				$("#goods_name").text(data.data.goods_name);//商品名称
				$(".theGoodsPrice").text(data.data.goods_price);//商品价格
				$(".goods_detail_con p").html(data.data.goods_detail);//商品介绍
				//window.localStorage["goods_deposit"] = data.data.goods_deposit;//判断是否是桶装水
				if (data.data.goods_deposit != 1) {
					$("#anniou").css("display:none;");
				};
				goods_id = data.data.id;//产品id

				var ShoppingCart = utils.getParam("ShoppingCart");
				if(ShoppingCart != null){
					var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
					var productlist = jsonstr.productlist;
					//遍历购物车列表
					for (var i in productlist) {
						//如果有该商品
						if (productlist[i].id == goods_id) {
							goods_nums=productlist[i].num
						}
					}
				}
				$('.count').text(goods_nums)
				$('.addition_list').show()

				if(cart.getCart().totalNumber == 0){
 				  	$("#bottomCartNum").hide();
 				}else if (cart.getCart().totalNumber > 0) {
 						$("#bottomCartNum").show();
 						$("#bottomCartNum").addClass('mui-badge-success');
 						$("#bottomCartNum").addClass('mui-badge');
						$("#bottomCartNum").css({'background':'#D44444','color':'#fff'});
 				}

				n=goods_nums;

				if(cart.getCart() != undefined) {
					$('#bottomCartTotalPrice').html(cart.getCart().totalAmount);
					$('#bottomCartNum').html(cart.getCart().totalNumber);
				}
        //刷新结算按钮的显示与隐藏
			   if(goods_nums == 0){
					 $(".gwc").find(".buttons").css('display','none');
				 } else if (goods_nums>0) {
				 	$(".gwc").find(".buttons").css('display','block');
				 }

				$('.goods_detail_title').on( 'click' , 'a' , function(){
					var goods_name = $('.goods_detail_title').find("#goods_name").text();
					var goods_id = $('.goods_detail_title').attr("goods_id");
					var w_ticked_img = $('.mui-slider-item').find('img').attr('src');
					var product =
					{
						'id': goods_id,        //属性名用引号括起来,属性间由逗号隔开
						'goods_name': goods_name,
						'goods_title': goods_title,
						'goods_price_list': goods_price_list,
						'goods_water_price': goods_water_price,
						'goods_water_set': goods_water_set,
						'goods_rebate': goods_rebate,
						'goods_num': goods_num,
						'goods_detail': goods_detail,
						'goods_type': goods_type,
						'goods_time': goods_time,
						'goods_img': goods_img,
						'goods_img_list': goods_img_list,
						'goods_gift_id': goods_gift_id,
						'goods_tickets': goods_tickets,
						'goods_deposit': goods_deposit,
						'goods_status': goods_status,
						'goods_px': goods_px,
						'goods_xl': goods_xl,
						'goods_brand_name': goods_brand_name,
						'goods_monthly_sales': goods_monthly_sales
					}
					product = JSON.stringify(product);
					localStorage.setItem("product",product);
					localStorage.setItem("w_ticked_img",w_ticked_img);
				  window.location.href="http://localhost/water_shuidaojia/water_1/html/user/tickcts/buy_ticket.html?goods_id="+goods_id;
				})

				}
		});

})

效果图: