js 点击数量加一操作数据库

最新推荐文章于 2024-09-21 18:24:56 发布

原创最新推荐文章于 2024-09-21 18:24:56 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

jquery 专栏收录该内容

12 篇文章

订阅专栏

这是一个使用JavaScript和jQuery实现的页面，当用户点击指定元素时，会发送AJAX请求到后台，更新数据库中对应的点击数量。页面还包含一个动态加载的宝贝排行榜，展示每个宝贝的图片和当前投票数。点击图片旁边的点赞图标，会触发点击计数功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>