svn+springboot+ajax分页

1.head.html页面有个form表单,搜索按钮type=“submit”,搜索框的name=“keyword”,然后通过商品名模糊查找商品,点击搜索按钮,把值带到控制器类,

/**
	 * 通过商品名搜索商品控制器
	 */
	@RequestMapping("p_Head")
	public String getGoodsByGNameView(Model model,@RequestParam(value="keyword",defaultValue="默认") String keyword) {
	  System.out.println(keyword);
		model.addAttribute("keyword", keyword);
		return "goods/search_p";
	}

2.通过控制器类返回到要跳转的页面,并把要查找的名字传到相应页面。search_p.html页面接收这个值,并通过ajax把值传给另个一控制器处理

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

     $(function(){
     		//加载第一页
            sendAjax(1);
        
     })
     
      function sendAjax(index){
    	 //获取隐藏在页面中要查询的商品名
    	 var keyword=$("#keyword").attr("value");
    	 //console.log(keyword);
    	 $.ajax({
    	  "async":true,
    	  "type":"GET",
    	  "data":{"keyword":keyword,"index":index}, 
    	  "dataType":"json",
    	  "url":"p_Head2",
    	  "success":function(data){
    		 // console.log(data);
    		  loadDom(data);
    	  }
    	 })
     } 
    	//拼接页面
    	 function loadDom(obj){
    		
    		 $("#content").html("");
    		  for(var i in obj.list){
    			 var list=obj.list[i];
    			//console.log(list)
    			  var li=
    					`<li>
  				    <a href="goodsDetail?gdsId=+`+list.goodsId+`" target="_blank" title="酸辣土豆丝">
  				    <img src="`+list.goodsImg+`"  alt="图片加载失败"   />
  				    </a>
  				    <p class="P-price FontW Font16"><span>¥`+list.goodsPrice+`</span></p>
  				    <p class="P-title"><a href="goodsDetail?gdsId=+`+list.goodsId+`" target="_blank"  title="酸辣土豆丝">`+list.goodsName+`</a></p>
  				    <p class="P-shop Overflow"><span class="sa"><a href="shop.html" target="_blank"  title="酸辣土豆丝">好味来快餐店</a></span>
  				    <span class="sp" >西安·莲湖区</span></p> 
     				 </li>`;
    			 $("#content").append(li); 
    		 } 
			//首页
			$("#head").click(function(){
				sendAjax(1);
			})
      		//上一页
      	    	$("#pre").click(function(){
      	    		//获取当前页
      	    		var cur=obj.curPage;
      	    		console.log("cur:"+cur);
      	    		var index=(cur<=1)?1:cur-1;
      	    		sendAjax(index);
      	    	})
      	    //下一页
      	    	$("#next").click(function(){
      	    	//获取当前页
      	    		var cur=obj.curPage
      	    	//获取总页数 
      	    		var pages=obj.pages
      	    		var index=(cur>=pages)?pages:cur+1;
      	    		sendAjax(index);
      	    	})	
      	    	//最后一页
      	    	$("#last").click(function(){
      	    		var pages=obj.pages
      	    		sendAjax(pages);
      	    	})
      	    	//设置总页数
      	    	$("#total").html(obj.pages);
      		   //设置当前页
      	    	$("#curPage").html(obj.curPage);
    	 } 
      </script>

控制器接收搜索商品名+搜索页数

/**
	 * 用ajax实现页面局部刷新
	 */
	@ResponseBody
	@RequestMapping("p_Head2")
	public Map<String, Object> getGoodsByGNameView2(@RequestParam(value="keyword",defaultValue="默认") String keyword,int index) {
		
		int pageSize=4;//设置默认每页的数据
		//获取记录数
		int count=service.getGoodsCounts(keyword);
		//获取总页码数
		int pages=service.getGoodsPages(keyword, pageSize);
		System.out.println("总页码数:"+pages);
		//拿到相应的数据一页一页拿
		List<Goods> list=service.getListGoodsByGName(keyword,(index-1)*pageSize,pageSize);
		System.out.println(keyword);
		for (Goods goods : list) {
			System.out.println(goods);
		}
		Map<String,Object> map=new HashMap<String,Object>();
		//放相应的数据进map
		map.put("list",list);
		//放总页数
		map.put("pages",pages);
		//放当前页
		map.put("curPage",index);
		return map;
	}

分页

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值