Jquery公告滚动+AJAX后台得到数据_Javascript教程-查字典教程网
Jquery公告滚动+AJAX后台得到数据
Jquery公告滚动+AJAX后台得到数据
发布时间:2016-12-30 来源:查字典编辑
摘要:aspx复制代码代码如下:varmyar1;varmyar2;functionNotice(){//定时器热门促销varpdata="nam...

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 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%">

<div align="left" id="scrollDiv1">

<ul id="ul1" >

</ul>

</div>

</td>

<td width="46%" height="33">

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

}

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类