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>

赞 (0)

相关推荐

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

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • HTML5+JS+JQuery+ECharts实现异步加载问题

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编写. 1.插入一个标签 <div id="main" style="width:600px;height:400px;"></div> 设置他的一些style(可自行美化,我很懒!!!). 2.在body下建一个<script>脚本(

  • js 延迟加载 改变JS的位置加快网页加载速度

    当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • js实现网页图片延时加载 提升网页打开速度

    js实现网页图片延时加载 提升网页打开速度

    提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

  • 浅谈js中调用函数时加不加括号的问题

    其实总结起来如下: 函数只要是要调用它进行执行的,都必须加括号.此时,函数()实际上等于函数的返回值.当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码. 不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码.它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行. 所以一般时候我们都是采用的是无括号的原因.这也是由于括号的二义性,因为括号是"函数调用运算符",相当于在执行

  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

  • 基于JS如何实现给字符加千分符(65，541，694，158)

    本文以65,541,694,158为例,介绍实现给字符加千分符的方法,代码比较简单易懂,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给字符加千分号</title> <script type="text/javascript"> var str = '2359844564654'; func

随机推荐