Jquery公告滚动+AJAX后台得到数据


Posted in Javascript onApril 14, 2011

aspx

<script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"></script> 
<script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var myar1;var myar2; 
function Notice(){//定时器 热门促销 
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=1"; 
$.ajax({ 
url: "Util/MainUtil.aspx", //后台处理类 
type: "POST", 
data: pdata, 
dataType: "html", 
timeout: 10000, 
error: function(data) { }, 
success: function(data) { 
//因为这个AJAX是定时器控制的,每过5分钟就会自动去后台刷新。取出最新数据。 
//所有在重装数据数据时,要先停止针对这些数据的所有动作。 
$("#scrollDiv1").stop(true); 
//在容器中输出数据 
$("#scrollDiv1>#ul1").innerHTML=""; 
//HTML(data)是Jquery的一个方法。是把HTML代码解析并装入 
$("#scrollDiv1>#ul1").html(data); 
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 <DIV class=spctrl></DIV>setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 
//利用myar变量来控制输出时的对应的编号。然后接着那个编号执行调用函数。 这样,不会有那种替换数据时,滚动效果卡住的感觉。视觉效果好。 
//虽然这样有可能不是从第一个最新更新的公告开始显示,有利有弊。 
myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) 
$("#scrollDiv1").hover(function() { clearInterval(myar1); }, function() { myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) }); //当鼠标放上去的时候,滚动停止,鼠标离开的时候滚动开始 
//HOVER 方法用来使当你鼠标停在滚动的某条数据时。响应停止滚动动作。可以点击去超链。 
//后台的那个函数:如果又移走鼠标,则从刚才的变量编号开始滚动。 
} 
}); 
} 
//定时器控制。每5分钟针对某个容器执行一次内容的 更新 
$(function() { 
$("#ul1").everyTime(300000, function(i) {//每5分钟执行一次 
Notice(); 
}); 
}); 
//其载入顺序要注意。首先要等所有数据载入以后才可以。也就是AJAX填充之后,才能调用。那么window.onload或者在BODY中ONLOAD都可以 
//但是$(<SPAN size="-1"><EM>document).ready</EM>和onload的有区别。$(<SPAN size="-1"><EM>document).ready是在DOM框架载入完成就执行。我们要等待AJAX。所以这里不能用。</EM></SPAN></SPAN> 
<SPAN size="-1">//这是$(<SPAN size="-1"><EM>document).ready比较稳定的写法。</EM></SPAN></SPAN> 
<SPAN size="-1">//jQuery.noConflict(); jQuery(document).ready(function(){});<BR></SPAN> 
//但有人说 
//$(document).ready(function(){ 
// alert("hello"); 
//});(1) 
// <body onload="alert('hello');">(2) 
// 上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会//冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来。 
//window.onload = function() { Notice(); } 
function Notice2(){//定时器 热门促销 
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=2"; 
$.ajax({ 
url: "Util/MainUtil.aspx", //后台处理类 
type: "POST", 
data: pdata, 
dataType: "html", 
timeout: 10000, 
error: function(data) { }, 
success: function(data) { 
$("#scrollDiv2").stop(true); 
$("#scrollDiv2>#ul2").innerHTML=""; 
//在容器中输出数据 
$("#scrollDiv2>#ul2").html(data); 
myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) 
$("#scrollDiv2").hover(function() { clearInterval(myar2); }, function() { myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) }); //当鼠标放上去的时候,滚动停止,鼠标离开的时候滚动开始 
} 
}); 
} 
$(function() { 
$("#ul2").everyTime(300000, function(i) {//每5分钟执行一次 
Notice2(); 
}); 
}); 
function AutoScroll(obj) { 
$(obj).find("ul:first").animate({ 
marginTop: "-25px" 
}, 500, function() { 
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); 
}); 
} 
</script> 
<style type="text/css"> 
ul, li 
{ 
margin: 0; 
padding: 0; 
} 
#scrollDiv1 
{ 
width: 300px; 
height: 25px; 
line-height: 25px; 
border: #ccc 0px solid; 
overflow: hidden; 
} 
#scrollDiv1 li 
{ 
height: 25px; 
padding-left: 10px; 
} 
#scrollDiv2 
{ 
width: 300px; 
height: 25px; 
line-height: 25px; 
border: #ccc 0px solid; 
overflow: hidden; 
} 
#scrollDiv2 li 
{ 
height: 25px; 
padding-left: 10px; 
} 
</style> 
</head> 
<body link="#000000" vlink="#000000" alink="#000000" onload="Notice();Notice2()"> 
<%--头部部分--%> 
<table style="margin-bottom: 4px" cellspacing="0" cellpadding="0" width="910" align="center" 
border="0"> 
<tbody> 
<tr> 
<td width="910" height="100" background="images/LOGO.jpg"> 
<p align="center"> 
<b></b> 
</td> 
</tr> 
<tr> 
<td valign="bottom" background="images/bar.jpg" height="71"> 
<table height="71" cellspacing="0" cellpadding="0" width="100%" align="center" border="0"> 
<tbody> 
<tr valign="middle"> 
<td width="8%" height="33"> 
<div align="right"> 
<font size="2">公告:</font></div> 
</td> 
<td width="46%" style="line-height: 145%"> 
<div align="left" id="scrollDiv1"> 
<ul id="ul1" > 
</ul> 
</div> 
</td> 
<td width="46%" height="33" style="line-height: 145%"> 
<div align="left" id="scrollDiv2" > 
<ul id="ul2" > 
</ul> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
<%--头部部分结束--%> 
后台Util/MainUtil.aspx.cs输出对应的 HTML 的数据 
using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Xml.Linq; 
namespace Web.Util 
{ 
public partial class MainUtil : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
try 
{ 
int k = int.Parse(Request["param"].ToString()); 
switch (k) 
{ 
case 1: 
toOne(); 
break; 
case 2: 
toTwo(); 
break; 
default: 
break; 
} 
} 
catch { } 
} 
private void toOne() 
{ 
try 
{ 
string st = String.Empty; 
string companyName = Request["nameparam"].ToString(); 
DataTable dt1 = DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where TypeId='2' And Creater='" + companyName + "'order by CreatTime desc").Tables[0]; 
for (int i = 0; i < dt1.Rows.Count; i++) 
{ 
//把公告做成超链接 
st += "<li><b> <a style='color: #000000' href='Detail.aspx?CommpanyServer=2&Company=" + companyName + "&id=" + dt1.Rows[i]["Id"].ToString() + "' target='_blank'> <font color='#FF3300'>" + dt1.Rows[i]["Title"].ToString() + "</font></a></b></li>"; 
} 
showHtml(st); 
} 
catch { } 
} 
private void toTwo() 
{ 
try 
{ 
string st = String.Empty; 
string companyName= Request["nameparam"].ToString(); 
DataTable dt2= DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where Id IN (select top 10 Id from 公告表 where TypeId='2' And Creater='"+companyName+"'order by CreatTime desc) order by CreatTime asc").Tables[0]; 
//把公告做成超链接 
for (int i = 0; i < dt2.Rows.Count; i++) 
{ 
st += "<li><b> <a style='color: #000000' href='Detail.aspx?CommpanyServer=2&Company=" + companyName + "&id=" + dt2.Rows[i]["Id"].ToString() + "' target='_blank'><font color='#FF3300'>" + dt2.Rows[i]["Title"].ToString() + "</font></a></b></li>"; 
} 
showHtml(st); 
} 
catch { } 
} 
private void showHtml(string st){ 
Response.ContentType = "text/html";//text/html,和application/json 都是输出格式 
Response.Write(st); 
Response.Flush(); 
Response.Close(); 
} 
} 
}

Javascript 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
jquery中eq和get的区别与使用方法
Apr 14 #Javascript
基于jquery的blockui插件显示弹出层
Apr 14 #Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
javascript算法学习(直接插入排序)
Apr 12 #Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 #Javascript
jquery监控数据是否变化(修正版)
Apr 12 #Javascript
You might like
基于mysql的论坛(4)
2006/10/09 PHP
php split汉字
2009/06/05 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Vue.directive()的用法和实例详解
2018/03/04 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
python绘制汉诺塔
2021/03/01 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
C有"按引用传递"吗
2016/09/06 面试题
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
协议书怎么写
2014/04/21 职场文书
实习报告评语
2014/04/26 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers