Jquery公告滚动+AJAX后台得到数据_jquery
程序员文章站
2022-05-03 15:26:52
...
aspx
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都可以
//但是$(document).ready和onload的有区别。$(document).ready是在DOM框架载入完成就执行。我们要等待AJAX。所以这里不能用。
//这是$(document).ready比较稳定的写法。
//jQuery.noConflict(); jQuery(document).ready(function(){});
//但有人说
//$(document).ready(function(){
// alert("hello");
//});(1)
// (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);
});
}
border="0">
后台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 {
//把公告做成超链接
st += " " + dt1.Rows[i]["Title"].ToString() + " ";
}
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 {
st += " " + dt2.Rows[i]["Title"].ToString() + " ";
}
showHtml(st);
}
catch { }
}
private void showHtml(string st){
Response.ContentType = "text/html";//text/html,和application/json 都是输出格式
Response.Write(st);
Response.Flush();
Response.Close();
}
}
}
复制代码 代码如下:
//利用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都可以
//但是$(document).ready和onload的有区别。$(document).ready是在DOM框架载入完成就执行。我们要等待AJAX。所以这里不能用。
//这是$(document).ready比较稳定的写法。
//jQuery.noConflict(); jQuery(document).ready(function(){});
//但有人说
//$(document).ready(function(){
// alert("hello");
//});(1)
// (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);
});
}
| |||
|
后台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 {
//把公告做成超链接
st += "
}
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 {
st += "
}
showHtml(st);
}
catch { }
}
private void showHtml(string st){
Response.ContentType = "text/html";//text/html,和application/json 都是输出格式
Response.Write(st);
Response.Flush();
Response.Close();
}
}
}
推荐阅读
-
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
-
Jquery 使用Ajax获取后台返回的Json数据后,页面处理
-
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
-
jquery 通过ajax请求获取后台数据显示在表格上的方法
-
jQuery AJAX 方法success()后台传来的4种数据详解
-
jQuery ajax()使用serialize()提交form数据到后台
-
jquery+ajax每秒向后台发送请求数据然后返回页面的代码_jquery
-
ajax - 如何用php+jquery实现开关按钮与后台数据库交互?
-
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
-
jquery ajax如何将后台数据返回给前台表格实例代码详解