Jquery公告滾動(dòng)+AJAX后臺(tái)得到數(shù)據(jù)

更新時(shí)間：2011年04月14日 21:39:14 作者：

ajax得到值，用JQUERY綁定給對(duì)應(yīng)的UL.利用JQUERY的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)他們的滾動(dòng)公告。

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(){//定時(shí)器 熱門(mén)促銷(xiāo) 
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=1"; 
$.ajax({ 
url: "Util/MainUtil.aspx", //后臺(tái)處理類(lèi) 
type: "POST", 
data: pdata, 
dataType: "html", 
timeout: 10000, 
error: function(data) { }, 
success: function(data) { 
//因?yàn)檫@個(gè)AJAX是定時(shí)器控制的，每過(guò)5分鐘就會(huì)自動(dòng)去后臺(tái)刷新。取出最新數(shù)據(jù)。 
//所有在重裝數(shù)據(jù)數(shù)據(jù)時(shí)，要先停止針對(duì)這些數(shù)據(jù)的所有動(dòng)作。 
$("#scrollDiv1").stop(true); 
//在容器中輸出數(shù)據(jù) 
$("#scrollDiv1>#ul1").innerHTML=""; 
//HTML（data）是Jquery的一個(gè)方法。是把HTML代碼解析并裝入 
$("#scrollDiv1>#ul1").html(data); 
//setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。 <DIV class=spctrl></DIV>　　setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。 
//利用myar變量來(lái)控制輸出時(shí)的對(duì)應(yīng)的編號(hào)。然后接著那個(gè)編號(hào)執(zhí)行調(diào)用函數(shù)。 這樣，不會(huì)有那種替換數(shù)據(jù)時(shí)，滾動(dòng)效果卡住的感覺(jué)。視覺(jué)效果好。 
//雖然這樣有可能不是從第一個(gè)最新更新的公告開(kāi)始顯示，有利有弊。 
myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) 
$("#scrollDiv1").hover(function() { clearInterval(myar1); }, function() { myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) }); //當(dāng)鼠標(biāo)放上去的時(shí)候，滾動(dòng)停止，鼠標(biāo)離開(kāi)的時(shí)候滾動(dòng)開(kāi)始 
//HOVER 方法用來(lái)使當(dāng)你鼠標(biāo)停在滾動(dòng)的某條數(shù)據(jù)時(shí)。響應(yīng)停止?jié)L動(dòng)動(dòng)作?？梢渣c(diǎn)擊去超鏈。 
//后臺(tái)的那個(gè)函數(shù)：如果又移走鼠標(biāo)，則從剛才的變量編號(hào)開(kāi)始滾動(dòng)。 
} 
}); 
} 
//定時(shí)器控制。每5分鐘針對(duì)某個(gè)容器執(zhí)行一次內(nèi)容的 更新 
$(function() { 
$("#ul1").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次 
Notice(); 
}); 
}); 
//其載入順序要注意。首先要等所有數(shù)據(jù)載入以后才可以。也就是AJAX填充之后，才能調(diào)用。那么window.onload或者在BODY中ONLOAD都可以 
//但是$(<SPAN size="-1"><EM>document).ready</EM>和onload的有區(qū)別。$(<SPAN size="-1"><EM>document).ready是在DOM框架載入完成就執(zhí)行。我們要等待AJAX。所以這里不能用。</EM></SPAN></SPAN> 
<SPAN size="-1">//這是$(<SPAN size="-1"><EM>document).ready比較穩(wěn)定的寫(xiě)法。</EM></SPAN></SPAN> 
<SPAN size="-1">//jQuery.noConflict(); jQuery(document).ready(function(){});<BR></SPAN> 
//但有人說(shuō) 
//$(document).ready(function(){ 
// alert("hello"); 
//});(1) 
// <body onload="alert('hello');">（2） 
// 上面兩段代碼是等價(jià)的。但代碼1的好處是做到表現(xiàn)和邏輯分離。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一個(gè)頁(yè)面中重復(fù)出現(xiàn)，而不會(huì)//沖突?；旧螶query的很多plugin都是利用這個(gè)特性，正因?yàn)檫@個(gè)特性，多個(gè)plugin共同使用起來(lái)。 
//window.onload = function() { Notice(); } 
function Notice2(){//定時(shí)器 熱門(mén)促銷(xiāo) 
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=2"; 
$.ajax({ 
url: "Util/MainUtil.aspx", //后臺(tái)處理類(lèi) 
type: "POST", 
data: pdata, 
dataType: "html", 
timeout: 10000, 
error: function(data) { }, 
success: function(data) { 
$("#scrollDiv2").stop(true); 
$("#scrollDiv2>#ul2").innerHTML=""; 
//在容器中輸出數(shù)據(jù) 
$("#scrollDiv2>#ul2").html(data); 
myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) 
$("#scrollDiv2").hover(function() { clearInterval(myar2); }, function() { myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) }); //當(dāng)鼠標(biāo)放上去的時(shí)候，滾動(dòng)停止，鼠標(biāo)離開(kāi)的時(shí)候滾動(dòng)開(kāi)始 
} 
}); 
} 
$(function() { 
$("#ul2").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次 
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> 
<%--頭部部分結(jié)束--%> 
后臺(tái)Util/MainUtil.aspx.cs輸出對(duì)應(yīng)的 HTML 的數(shù)據(jù) 
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(); 
} 
} 
} 