ajax读取新闻列表的loading效果

最新推荐文章于 2022-08-01 16:56:32 发布

转载最新推荐文章于 2022-08-01 16:56:32 发布 · 665 阅读

·

0

·

文章标签：

#ajax #string #div #callback #server #function

本文介绍了一个使用加载动画展示新闻列表的Web页面实现方法。页面初始显示加载图标，随后通过Ajax调用从服务器获取最新的新闻标题列表并动态显示。涉及到的技术包括HTML、JavaScript及Ajax交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们会经常遇到这样一种效果：先在页面上显示“loading”或者一个圆圈在那转，过几秒钟，会在上述两个地方显示出新闻的列表。下面的内容就是关于这种效果的实现。

1、前态页面 Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register TagPrefix="UC1" TagName="TopBar" Src="UserControl/TopBar.ascx"%>

<!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 runat="server">

<script language="javascript" src="JS/ReadNewInfo.js"></script>

<title>首页</title>

</head>

<body onload="Page_init();">

<form id="form1" runat="server">

<div><UC1:TopBar id="TopBar1" runat="server"></UC1:TopBar>

</div>

<div class="post">

<div class="postTitle">

<a id="viewpost1_TitleUrl" href="#">新闻主题列表</a>

</div>

<div class="postText" id="ShowTitleList"><center><br/><br/><br/><img src='Images/loading.gif' /></center></div>

</div>

</form>

</body>

</html>

2、js文件 ReadNewInfo.js

// JScript 文件

///createtime 2007-3-27

///author wangxin

var StartShowGif="<center><br /><img src='Images/loading.gif' /></center>";

var Start_Circle="<center><br /><img src='Images/load2.gif' /></center>";

var Title_Para=""; // 主题参数

var Content_Para=""; // 内容参数

function Page_init()

{

//if(GetJsValue!=null && GetJsValue!="")

// {

// S_Read_Content(GetJsValue);

//}

//else

//{

// Read_ContentList(GetJsValue); //显示新闻内容

//}

//Read_WebSiteList(); //显示网站列表

Read_TitleList(); //显示新闻主题

}

//-----------------------------------------

//显示网站列表

//-----------------------------------------

//显示新闻主题时间

function Read_TitleList()

{

document.getElementById("ShowTitleList").innerHTML=StartShowGif; //显示新闻主题

Default.Server_Read_TitleList(Title_Para,CallBack_Read_TitleList);

}

function CallBack_Read_TitleList(res)

{

if(!res.error && res.value !="")

{

document.getElementById("ShowTitleList").innerHTML = res.value;

}

else

{

document.getElementById("ShowTitleList").innerHTML = "读取数据出错！";

}

}

//-----------------------------------------

3、后台文件 Default.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Mysqlserver;

using System.Text;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

AjaxPro.Utility.RegisterTypeForAjax(typeof(Default));

}

string Server_Read_TitleList(WebID)根据参数读取某网站下的主题列表

}

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。