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

赞 (0)

相关推荐

  • jquery实现公告翻滚效果

    翻滚效果非常不错,代码也很简单,这里就不多废话了. 复制代码 代码如下: //样式文件:         <style type="text/css">             * {                 margin: 0;                 padding: 0;             }             .scrollNews {                 width: 100%;                 height

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

  • 基于jQuery的公告无限循环滚动实现代码

    在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 复制代码 代码如下: //第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $('#callboard'); var callboardUl = callboard.find('ul'); var callboardLi = callboard.find('li'); var liLen = callboard.

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • jquery垂直公告滚动实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • jquery 弹出公告功能代码

    jquery 弹出公告 *{margin:0;padding:0;font-size:12px;} li{float:left;width:100px;border:1px solid #ccc;list-style:none;text-align:center;} h3{margin:20px auto;text-align:center;} input{width:120px;height:30px;cursor:pointer;} #notice{position:absolute;wid

  • jQuery 翻牌或百叶窗效果(内容三秒自动切换)

    核心代码: 复制代码 代码如下: $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0; //LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式

  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

  • JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页

    所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码 复制代码 代码如下: <script type="text/javascript"> <!-- $(documen

随机推荐