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;
}