AJAX JS 评论页面无刷新加载数据+TAB切换全部好中差JS效果。

<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
<title>我的评价</title>
<link rel="stylesheet" href="css/rate.css">
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="toast/toast.css">
<script src="toast/toast.js"></script>
<script src="js/jquery.history.js"></script>
</head>
<body>

<div style="height:48px;"></div>
<ul class="tabul">
  <li><a href="javascript:void(0);" data="0">全部 (${count_all.result})</a></li>
  <li><a href="javascript:void(0);" data="3">好评 (${count_3.result})</a></li>
  <li><a href="javascript:void(0);" data="2">中评 (${count_2.result})</a></li>
  <li><a href="javascript:void(0);" data="1">差评 (${count_1.result})</a></li>
</ul>
<ul class="ratelist">  
  <!-- li> <img src="" class="himg" alt="" />
    <h2>爱美的小女孩<span class="icon-pj cp"><i></i>差评</span></h2>
    <div class="note"> 最近二十年是我国地方博物馆事业发展的黄金时间，很多具有地域性的博物馆建筑已经承担起收藏功能。 </div>
    <dl class="pics">
      <dd><img src="" alt="" /></dd>
      <dd><img src="" alt="" /></dd>
      <dd><img src="" alt="" /></dd>
      <dd><img src="" alt="" /></dd>
      <dd><img src="" alt="" /></dd>
    </dl>
    <p class="p1">颜色分类：魔力红 尺码：M<span>2016/09/12 9:23</span></p>
  </li--->
  
</ul>
<div id="bottomTxt" style="text-align:center;padding:12px 0; color:#999;">正在加载中...</div>

<script>
	var bottomTxt,page = 0,loading = false,isFinish = false;
	var rank = '${param.rank}';	
	var data = { page:page,pageSize:10,rank:rank};		
	var productId ='${param.productId}';
	
	$(function() {
		bottomTxt = $("#bottomTxt");
		$(window).scroll(checkScroll);//监听滚动
		loadPageList(); //加载第一页产品	
		
		if(rank==0){$(".tabul li:eq(0) a").addClass("on");}
		if(rank==3){$(".tabul li:eq(1) a").addClass("on");}
		if(rank==2){$(".tabul li:eq(2) a").addClass("on");}
		if(rank==1){$(".tabul li:eq(3) a").addClass("on");}
		
		$(".tabul li").click(function(){
			$(".tabul li a").removeClass("on");
			$(this).find("a").addClass("on");
			rank = $(this).find("a").attr("data");
			if(rank=="0"){rank="";}
			data['rank'] = rank;			
			replaceUrl();
			loadPageList();
		})
	})	
	
	//滚动监听
	function checkScroll() {
		var srollPos = $(window).scrollTop(); //滚动条距离顶部的高度
		var windowHeight = $(window).height(); //窗口的高度
		var dbHiht = $("body").height(); //整个页面文件的高度
		if ((windowHeight + srollPos) >= (dbHiht) && !loading && !isFinish) {			
			loading = true;
			setTimeout(function() {
				loadPageList();
			},300);
		}
	}
	
	//改变URL地址
	function replaceUrl() {        
		var currentState = history.state;
		var stateObj = { foo: "bar" };
		if(rank=="0"){rank="";}
		window.history.pushState(stateObj,"","list?productId="+productId+"&rank="+rank);
    }
		
	//动态加载
	function loadPageList() {
		$(".ratelist li").remove();
		toast.loading();
		var result;		
		data = data;	
		$.ajax({
			url : "comment/list",type : "post",data : data,async: false,success : function(data) {
				var data = JSON.parse(data);				
				if (data.error_code != 0) {
					toast.result(data.error_message);
					return;
				}				
				result = data.result;
				toast.remove();	
				console.log();
			},error : function(err) {
				toast.result("网络异常");
				loading = false;
			}
		})	
		
		if(result){				
			//判断是否结束
			if(result.length < 10){
				isFinish = true;
				bottomTxt.text("没有更多记录了...");
			}				
			$.each(result,function(index,items){
				var n = items.rank;	
				var a;
				if(n==3){ a = '<span class="icon-pj hp"><i></i>好评</span>'; }
				if(n==2){ a = '<span class="icon-pj zp"><i></i>中评</span>'; }
				if(n==1){ a = '<span class="icon-pj cp"><i></i>差评</span>'; }
				var temp ='<li><img src="'+items.headUrl+'" class="himg" alt="" />'+
				    '<h2><b>'+items.nickName+'</b>'+a+'</h2>'+
				    '<div class="note">'+items.commentItem[0].comment+'</div>'+				    
				    '<p class="p1">颜色分类：'+items.color+' 尺码：'+items.size+'<span>'+items.commentItem[0].createTime.substr(0,16)+'</span></p>'+
				    '</li>';
				    $(".ratelist").append(temp); 
			});
			loading = false;
			page++;
		}
	}		
</script>

</body>
</html>
AJAX JS 评论页面无刷新加载数据+TAB切换 全部 好中差JS效果。

猜你在找的Ajax相关文章

AJAX JS 评论页面无刷新加载数据+TAB切换全部好中差JS效果。
