js实现的点击数量加一可操作数据库

复制代码 代码如下:

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