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

Input 特殊事件onpopertychange和oninput

Jun 17 Javascript

js 单引号传递方法

Jun 22 Javascript

javascript 文章截取部分无损html显示实现代码

May 04 Javascript

AngularJS入门教程（二）：AngularJS模板

Dec 06 Javascript

JavaScript Split()方法

Dec 18 Javascript

页面get请求中文参数方法乱码问题的快速解决方法

May 31 Javascript

codeMirror插件使用讲解

Jan 16 Javascript

jquery.cookie.js的介绍与使用方法

Feb 09 Javascript

JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

Feb 19 Javascript

jQuery dateRangePicker插件使用方法详解

Jul 28 jQuery

ionic3 懒加载

Aug 16 Javascript

JavaScript实现树的遍历算法示例【广度优先与深度优先】

Oct 26 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