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 相关文章推荐
javascript面向对象入门基础详细介绍
Sep 05 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
学习vue.js计算属性
Dec 03 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
使用JavaScript破解web
Sep 28 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
js实现微信聊天效果
2020/08/09 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
详解python读取和输出到txt
2019/03/29 Python
python Shapely使用指南详解
2020/02/18 Python
Python函数生成器原理及使用详解
2020/03/12 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
2015年仓管员工作总结
2015/04/21 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js