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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
vue实现Input输入框模糊查询方法
Jan 29 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python交易记录链的实现过程详解
2019/07/03 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
农村文化建设标语
2014/10/07 职场文书
项目战略合作意向书
2015/05/08 职场文书