编程 Javascript

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 相关文章推荐

jquery+json实现的搜索加分页效果

Mar 31 Javascript

更换select下拉菜单背景样式的实现代码

Dec 20 Javascript

js 金额文本框实现代码

Feb 14 Javascript

jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

Jan 23 Javascript

JS写的贪吃蛇游戏(个人练习)

Jul 08 Javascript

js判断是否为ie的方法小结

Jan 13 Javascript

Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)

Jan 23 Javascript

JavaScript Window浏览器对象模型方法与属性汇总

Apr 20 Javascript

JSONP跨域请求实例详解

Jul 04 Javascript

微信小程序自定义组件实现tabs选项卡功能

Jul 14 Javascript

微信小程序关键字变色实现代码实例

Dec 13 Javascript

JS运算符优先级与表达式示例详解

Sep 04 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