Jquery公告滾動 AJAX後臺得到資料

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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();
}
}
}

您可能感興趣的文章:

JQuery學習筆記 實現圖片翻轉效果和TAB標籤切換效果jquery 單行滾動、批量多行滾動、文字圖片翻屏滾動效果程式碼jquery 彈出公告功能程式碼基於jQuery的公告無限迴圈滾動實現程式碼jQuery 翻牌或百葉窗效果(內容三秒自動切換)jQuery Pagination Ajax分頁外掛(分頁切換時無重新整理與延遲)中文翻譯版jQuery實現公告文字左右滾動的例項程式碼jquery垂直公告滾動實現程式碼JQuery外掛iScroll實現下拉重新整理,滾動翻頁特效jquery實現公告翻滾效果

相關文章

前端開發 最新文章