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


Posted in Javascript onMay 09, 2014
<%@ 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>
Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
javascript字母大小写转换的4个函数详解
May 09 #Javascript
js统计页面的来访次数实现代码
May 09 #Javascript
JavaScript Array对象扩展indexOf()方法
May 09 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
深入理解Python中装饰器的用法
2016/06/28 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python3.x上post发送json数据
2018/03/04 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python自动生成sql语句的脚本
2021/02/24 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
高一家长会邀请函
2014/01/12 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
中华魂演讲稿
2014/05/13 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
导航工程专业自荐信
2014/09/02 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
离婚协议书格式
2015/01/26 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python