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 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
微信小程序实现简单的select下拉框
Nov 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的面试题集
2006/11/19 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
js实现放大镜特效
2017/05/18 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python中remove函数的踩坑记录
2021/01/04 Python
数据库连接池的工作原理
2012/09/26 面试题
学术诚信承诺书
2014/05/26 职场文书
合作协议书格式
2014/08/19 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
地方课程教学计划
2015/01/19 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
在Docker容器中部署SQL Server
2022/04/11 Servers
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python