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

复制代码 代码如下:

<%@ 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>

时间: 2024-09-02 01:35:49

js实现的点击数量加一可操作数据库_javascript技巧的相关文章

关于JS中的方法是否加括号的问题_javascript技巧

在我们js编写程序的时候,我们会写很多函数然后调用它们,那么这些函数调用的时候什么时候加()什么时候不加()?记住以下几个要点. (1)函数做参数时都不要括号. function fun(e) { alert(e); } function A(fun, e) { fun(e); } A(fun, 3);//弹出'3',函数fun当做实参传入另一个函数时,不加() (2)函数被调用的时候都要加括号.        看上面那段代码,第9行函数A被调用的时候是A(); (3)函数作为赋值符号右边的时候

JS前端框架关于重构的失败经验分享_javascript技巧

好了开始吧 重构这个其实也不是什么大动作,主要要实现的功能嘛,就是把现有的JS代码重新划分一下,解耦现有模块.然后我打算把现有的程序划分一下模块然后重新打包做一个命名空间实现use或者类似于java的Package的东西.那么我只要加载一个use的js文件调用这个文件的use函数,通过设置某些参数,我可以动态地加载所需要的模块.这个是最完美的想法(那时我很傻很天真).好的,噩梦开始了. 前提,我低估了3个月前的自己.//好吧,下面可能会出现un文明用语~~ 首先,计划的第一天,我的打算是分离这个

几种延迟加载JS代码的方法加快网页的访问速度_javascript技巧

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

yepnope.js 异步加载资源文件_javascript技巧

典型代码示例 复制代码 代码如下: yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 当Modernizr.geolocation为真时,加载yep项也就是"normal.js",否则加载nope项--可以同时加载多个文件. yepnope和现有的xxx script loader有什么区别? 个人认为主要 是这两点: 可以同时处理jav

Js Jquery创建一个弹出层可加载一个页面_javascript技巧

复制代码 代码如下: <!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=gb2312"

js实现数字每三位加逗号的方法_javascript技巧

本文实例讲述了js实现数字每三位加逗号的方法.分享给大家供大家参考.具体实现方法如下: function formatNum(str){ var newStr = ""; var count = 0; if(str.indexOf(".")==-1){ for(var i=str.length-1;i>=0;i--){ if(count % 3 == 0 && count != 0){ newStr = str.charAt(i) + &quo

JS使用正则表达式实现关键字替换加粗功能示例_javascript技巧

本文实例讲述了JS使用正则表达式实现关键字替换加粗功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Js表格万条数据瞬间加载实现代码_javascript技巧

Js表格,万条数据瞬间加载 在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行. 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天 受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中. 也就是说,Flex的DataGrid控件

JS实现图片预加载无需等待_javascript技巧

网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实