Jquery公告滚动+AJAX后台得到数据_Javascript教程-查字典教程网

aspx

复制代码代码如下:

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>

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>

<%--头部部分--%>

<table cellspacing="0" cellpadding="0" width="910" align="center"

border="0">

<tbody>

<tr>

<b></b>

</td>

</tr>

<tr>

<tbody>

</td>

</ul>

</div>

</td>

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

}