管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Jquery公告滚动+AJAX后台得到数据

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

　　}

　　}

　　}

教程首页 更多教程