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 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
jquery replace方法去空格
May 08 jQuery
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue下canvas裁剪图片实例讲解
Apr 16 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
Javascript实现字数统计
2015/07/03 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
小学生秋游活动方案
2014/02/23 职场文书
教师求职自荐书
2014/06/14 职场文书
财政局个人总结
2015/03/04 职场文书
毕业典礼主持词
2015/06/29 职场文书
python实现网络五子棋
2021/04/11 Python
正确的理解和使用Django信号(Signals)
2021/04/14 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL