Ajax 实现静态刷新页面 带加载旋转图片

 <!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Style/NiuLan.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">//当刷新的时候 原先的页面的展示数据不会隐藏这里面是隐藏函数
//取得PageRequestManager对象,每一个Asp.net Ajax页面中会右唯一一个这种对象负责处理所有的Async - Postback要求
var prm = Sys.WebForms.PageRequestManager.getInstance(); //新增事件处理至PageRequestManager的initializeRequest事件,当Async-Postback发生时,此事件会被触发,我们的InitRequest函数便会被运行    
prm.add_initializeRequest(InitRequest);
//新增事件处理至PageRequestManager的endRequest事件,当Async-Postback完成时,此事件会被触发,我们的EndRequest函数便会被运行   
prm.add_endRequest(EndRequest); function InitRequest(sender, args) {
//显示出UpdateProgress1控件
document.getElementById('detail').style.display = "none";
}
function EndRequest(sender, args) {
//隐藏UpdateProgress1控件
document.getElementById('detail').style.display = "block";
}
//用于取消Async-Postback动作
function CancelClick() {
//当处于Async-Postback动作时,get_isInAsyncPostBack函数会回传true,此时调用abortPostBack 函数便会取消Async-Postback动作。
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>
</head>
<body >
<form id="Form1" runat="server">
//使用  Ajax Extensitons 中的ScriptManager
<asp:ScriptManager runat="server">
</asp:ScriptManager>
//使用地方比如
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
//放代码
<div id="detail"><asp:ImageButton ID="ibtnFBSJ" runat="server" ImageUrl="/images/ershoufang/bs/fbsj.gif"
OnClick="ibtnFBSJ_Click" />
</div>
//当在静态刷新页面的时候会调用UpdateProgress 但是这个后台也是需要代码的看下面
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div style="text-align: center">
<img alt="" src="/images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
后台
protected void ibtnFBSJ_Click(object sender, ImageClickEventArgs e)
{
System.Threading.Thread.Sleep(2000);
drpSortOrder.SelectedValue = ((int)ErShouFangJiChuZuFang.order.按发布时间排序).ToString();
PopulateDetails();
}
//这样就可以实现为静态刷新页面,带加载过程中有旋转图片,用户体验会很好效果如下

 

时间: 2024-08-04 09:34:56

Ajax 实现静态刷新页面 带加载旋转图片的相关文章

Ajax实现静态刷新页面过程带加载旋转图片_AJAX相关

复制代码 代码如下: <!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 id="Head1" runat=

Ajax实现静态刷新页面过程带加载旋转图片

复制代码 代码如下: <!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 id="Head1" runat=

Ajax bootstrap美化网页并实现页面的加载删除与查看详情

Bookstrap:美化页面: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包. 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成. Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 只需要引用一些定义好的类,

Android webview旋转屏幕导致页面重新加载问题解决办法

Android webview旋转屏幕导致页面重新加载问题解决办法 1. 在create时候加个状态判断 protected void onCreate(Bundle savedInstanceState){ ... if (savedInstanceState == null) { mWebView.loadUrl("your_url"); } ... } 2. 重载保存状态的函数: @Override protected void onSaveInstanceState(Bundl

php+ajax实现无刷新动态加载数据技术

  无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新滚屏加载数据,例子非常的简单大家只要按流程来操作就可以了哦. 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PH

php+ajax实现无刷新动态加载数据技术_php实例

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

javascript-点击超链接后新页面没加载js

问题描述 点击超链接后新页面没加载js 问题是这样:两个页面 A B,A页面有个超链接,点击A页面的超链接后跳转到B页面,但是B页面没加载JS,刷新B页面之后才加载JS,怎样点击超链接之后自动刷新B页面或者自动加载JS,或者我这个B页面无法加载JS是什么原因造成的? 解决方案 a链接跳转到另外一个页面或者在本页面显示都是重新加载的,你的B页面渲染后js不显示要麽是你的js路径没有对,这个好检查,另一个就是你的写法是调用jquery库的,这时候你就得检查了,先加载jquery库文件,然后在加载你自

本机搭建tomcat服务器 架设网站 局域网内用户访问 页面动态加载的数据无法加载

问题描述 本机搭建tomcat服务器 架设网站 局域网内用户访问 页面动态加载的数据无法加载 本机搭建的tomcat服务器,数据库.局域网内用户访问系统页面,ajax动态加载数据无法显示.如图: [用户类型]是ajax动态加载的!本机页面正常,局域网内用户只有页面,没数据! 解决方案 你的代码呢?用chrome开发工具或者firebug看看报错了没有,ajax返回了什么内容. 解决方案二: 浏览器log中有没有错误,ajax打印下返回结果

php+ajax+jquery实现点击加载更多内容_jquery

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录