一.div代码如下:
<div style="width:20%;float:left;text-align:right" align="right" >
<img style="width:2em;height:2em" src="<%=request.getContextPath() %>/goods/image/good.png" οnclick="clickpraise('${goodspraise.get(i.index).goodsId}','${i.index}');"><font id="praise${i.index}">${goodspraise.get(i.index).praiseNum}</font>
</div>
(1)<font>标签的id值为动态值,循环更新
(2)函数clickpraise('${goodspraise.get(i.index).goodsId}','${i.index}')传了两个参数,一是索引序列,而是商品的id值
(3)函数实现点击商品的点赞数的图标,异步实现数值自动增加的效果。
二.js代码参考如下所示
function clickpraise(goodsid,i){
$.ajax({
type:'GET',
url:'asyncUpdateGoodsPromotionCenter.action',
dataType:'Json',
data:"goodsId="+goodsid,
async:true,
success: function(msg){
var id="#praise"+i;
$(id).html(msg);
},
error: function(a){
}
});
}
三..java文件代码如下所示
public void asyncUpdateGoodsPromotionCenter() throws IOException{
PrintWriter out=response.getWriter();
String goodsId=request.getParameter("goodsId");
Goods goods= promotionCenterService.asyncUpdateGoodsPromotionCenter(goodsId);
out.println(goods.getPraiseNum());
out.flush();
out.close();
}
四.实现效果如下截图