JQuery中AJAX的案列使用

Servlet 中的代码如下

  private static final long serialVersionUID = 1L;
	CakeService service =new CakeServiceImpl();
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		int pageSize=8;
		int index=1;//起始页
		int total=service.getPages(pageSize);
		String page=req.getParameter("page");
		if(page!=null && !"".equals(page.trim())){
			index=Integer.parseInt(page);
		}
		
		List<Cake> list=service.getListByPages(index, pageSize);
		
		Gson g=new Gson();
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("total", total);
		map.put("curPage", index);
		map.put("list", list);
		String strMap=g.toJson(map);
		resp.getWriter().print(strMap);
		
	}
$.ajax({
		type:"post",//提交方式
		url:"../CakeServlet",//请求路径
		async:false,//同步提交,异步为true
		data:{//json格式传递参数
			page:page
		},
		dataType:"json",//返回数据类型json
		success:function(obj){//obj为返回数据json类型的对象,success判断是否有数据返回
			//console.log(obj);
			//从json中拿出数据并赋值
			curPage=obj.curPage;
			total=obj.total;
			
		 	ul.empty();
			$("#abox").empty();
			for(i in obj.list){
				var item=obj.list[i];
				var li="<li class='product-li'><div class='product-div'><div class='picture'><img src='"+item.Cake_img+"' /></div><div class='text1'><h1>"+item.Cake_Englishname+" <br /> "+item.Cake_Chinesename+"</h1><p>"
				+item.Cake_describe+"</p><h2>¥ "+item.Cake_price+"/1.2 "+item.Cake_unit+"<a class='clickbuy' href='../CakedetailServlet?img="+item.Cake_img+"&cakeid="+item.Cake_id+"'>立即购买</a></h2></div></div></li>";
				ul.append(li);
			}
		var a=""; 
		for(var j=1;j<=obj.total;j++){
			//显示页码并实现点击刷新页面商品
			a=a+"<a onclick='sendPageAjax("+j+")'>"+j+"</a>";
		}
		
		var el="<a id='pre'>上一页</a>"+a+"<a id='next'>下一页</a>";
 		$("#abox").append(el);
 		
 		
 		
		}
	});

猜你喜欢

转载自blog.csdn.net/qq_27117471/article/details/83756073