js实现的点击数量加一可操作数据库
内容摘要
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String base
文章正文
复制代码 代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String groupId = request.getParameter("groupId");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>宝宝排行榜</title>
<style type="text/css">
body {
text-align: center;
margin: 0 auto;
padding: 0;
background: #ffefe5;
width: 100%;
}
a:link {
text-decoration: none;
}
#static {
margin: 0 auto;
text-align: left;
}
img {
width: 100%;
}
#main {
background: url("../pic/bj_12.jpg") repeat-x;
padding-top: 5px;
}
#main span {
font-size: 1.5em;
color: #2f0075;
margin-left: 40px;
}
#bottom {
width: 100%;
margin: 0;
padding: 0;
font-size: 1em;
}
#bottom ul li {
width: 48%;
float: left;
margin-left: -8%;
margin-right:10%;
list-style-type: none;
}
.sp {
margin-top: -50px;
border-radius: 8px;
}
</style>
<script type="text/javascript">
$(function(){
//动态加载宝贝排行信息
function loadSecondSort() {
$.ajax({
type : "POST",
data : "groupId="+$("#groupId").val(),
url : "<%=basePath%>findBobyRankByVote.action",
success : function(data) {
var list = data.list;
var row = "";
$("ul").empty();
if (list != null && list.length != 0) {
for(var i=0;i<list.length;i++) {
row = "<li><a href=\"bao_x.jsp?id="+list[i].id+"\"> <img src=\"../pic/"+list[i].pic+"\"></a><input type=\"hidden\" id=\"id\" value="+list[i].id+"><div class=\"sp\""+
"style=\"background-color: #ffb7cd; margin-top: 10px; height: 30px\">"+
"<img src=\"../pic/zan.png\" style=\"width: 22px; margin-left: 10px; margin-top: 5px;\" class=\"favour\">"+
"<span style=\"margin-top: 5px; color: #8a7da9; float: right; margin-right: 10px;\">已<span>"+list[i].vote+"</span>票"+
"</span></div></li>";
$(row).appendTo($("ul"));
}
}
}
});
}
$(".favour").live("click",function(){
var id = $(this).closest("li").find("#id").val();
$.post("<%=basePath%>updateBobyRank.action", "id=" + id,
function(data) {
if (data.msg==null){
if (data.success == true) {
loadSecondSort();
}
}else {
alert(data.msg);
}
});
});
window.onload = loadSecondSort();
});
</script>
</head>
<body>
<input type="hidden" id="groupId" value="<%=groupId%>">
<div id="static">
<img src="../pic/top10.jpg"> <a href="../jsp/index.jsp"><img
src="../pic/fan.png" style="width: 10%; margin-top: -50px;"></a>
<div id="main">
<span>近期排名:</span>
</div>
<div id="bottom">
<ul>
</ul>
</div>
</div>
</body>
</html>
代码注释
作者：喵哥笔记
