ajax实现无刷新分页

1.我们为什么要使用ajax

2. 什么是ajax

ajax的作用

 我们在使用ajax时需要导入的jar包

 

 接下来是代码展示

$(function(){
	//默认显示第一页
	myf('a');
})
//专门控制分页的方法
var pageIndex;
var max;
function myf(type){
	//拿到文本框的值
	var gname=$("#gname").val();
	if(type=='a'){	
		//首页
		pageIndex=1;
	}
	else if(type=='b'){
		//上一页
		if(pageIndex>1){
			pageIndex--;
		}else{
			alert("已经没有更前面的啦");
		}
		
	}
	else if(type=='c'){
		//下一页
		if(pageIndex<max){
			pageIndex++;
		}else {
			alert("已经是最后一页了")
		}
		
	}else {
		//末页
		pageIndex=max;
	}
	$.post("page.do",{pid:pageIndex,gname:gname},function(data){
		//根据属性拿到属性值 或者说根据键拿到值
		//alert(data.pageMax);//数据类型  String 
		//alert(data.goodsList);
		//把json格式的字符串解析成js的对象数组 
		//var ss =$.parseJSON(data);
		//alert($.type(ss));//array数组
		max =data.pageMax;
		var sb ="<table border=\"1px\" width=\"60%\">";
		 sb+="<tr align=\"center\">";
		sb+="<td>商品序号</td>";
		sb+="<td>商品名称</td>";	
		sb+="<td>商品图片</td>";		
	sb+="</tr>";
		$.each(data.goodsList,function(i, g){//下标,元素 商品
			sb+="<tr>";
			sb+="<td>"+g.gid+"</td>";
			sb+="<td>"+g.gname+"</td>";		
			sb+="<td><img src ='"+g.gpath+"'/></td>";
			sb+="</tr>";
		})
		sb+="</table>";
		//给div赋值
		$("#aa").html(sb);  
		//赋值当前页码和最大页码
		$("#xx").html(pageIndex);
		$("#yy").html(max);
	},"json")
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值