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

RGB颜色值转HTML十六进制(HEX)代码的JS函数

Apr 25 Javascript

DLL+ ActiveX控件+WEB页面调用例子

Aug 07 Javascript

原生javascript实现的分页插件pagenav

Aug 28 Javascript

让IE8浏览器支持function.bind()方法

Oct 16 Javascript

深入理解JavaScript系列（17）：面向对象编程之概论详细介绍

Mar 04 Javascript

浅谈js图片前端预览之filereader和window.URL.createObjectURL

Jun 30 Javascript

浅析JavaScript中作用域和作用域链

Dec 06 Javascript

使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

Jan 04 Javascript

JS作用域链详解

Jun 26 Javascript

纯js实现图片匀速淡入淡出效果

Aug 22 Javascript

vue checkbox 全选数据的绑定及获取和计算方法

Feb 09 Javascript

jQuery实现高级检索功能

May 28 jQuery

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