AJAX应用带标题更新

ajax

这里的一个应用是UpdateProgress的应用完善。为了给用户显示的效果更好而设计。你可以参看效果:

http://szhxy.gliet.edu.cn/qxgl/登录显示的更新过程。

代码如下:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#UpdatePanel1 ...{
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}   
</style>
    <title>更新测试</title>
</head>
<body>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" EnableScriptGlobalization="True" >

        </asp:ScriptManager>
        <div visible="false">
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
                <ProgressTemplate>
                                   
                <div id="Progress" style="border: 1px solid rgb(73, 138, 194); padding: 0px; z-index: 1000;  margin-top: 20%; margin-left: 30%; width: 229px; position: absolute; height: 94px; background-color: rgb(255, 255, 255); border-collapse: collapse; left: 206px; top: 129px;">
                   
            <table cellpadding="4" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style=" height:26px; text-align: left; background-image: url(tile_back.gif); text-align: left;">
                <span style="font-size: 9pt;color: #ffffff"> <strong>系统提示</strong></span></td>
            </tr>
            <tr>
                <td  valign="middle" style="height:100%;text-align: center; vertical-align: middle;">
                <br />
                <br />
                <img alt="Waiting..." src="indicator_mozilla_blu.gif" style="vertical-align: middle;border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" />
                <span style="font-size: 9pt">正在处理,请稍后……</span></td>
            </tr>
    </table>
                </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>

              
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                  密码:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <br />
                密码确认:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>

        </asp:UpdatePanel>
         
    </form>   
</body>
</html>

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;

public partial class _Default : System.Web.UI.Page
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        //System.Threading.Thread.Sleep(3000);
        int j = 0;
        for (int i = 0; i < 100000000; i++)
        ...{
            j = i+j;
       
        }
            if (TextBox1.Text.Equals(TextBox2.Text))
            ...{
                Response.Redirect("/login.aspx");
            }
            else
            ...{
                Response.Redirect("/error.aspx");
            }
      
    }

}

不过根据研究,http://szhxy.gliet.edu.cn/qxgl/Login.aspx?ReturnUrl=%2fqxgl%2fDefault.aspx使用的方法如下:
他是通过调用htm文件实现图像显示的。

将表单代码去掉替换如下:
<iframe scrolling="no" frameborder="0" marginwidth="0" marginheight="0" src="bar.htm" /></iframe>

可见还需要一个bar.htm。这样我们就建个:
<!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>
    <title>系统提示</title>
</head>

<body style="margin: 0px">
    <table cellpadding="4" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
            <td style=" height:26px; text-align: left; background-image: url(tile_back.gif); text-align: left;">
                <span style="font-size: 9pt;color: #ffffff"> <strong>系统提示</strong></span></td>

        </tr>
        <tr>
            <td  valign="middle" style="height:100%;text-align: center; vertical-align: middle;">
                <br />
                <br />
                <img alt="Waiting..." src="indicator_mozilla_blu.gif" style="vertical-align: middle;border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" />
                <span style="font-size: 9pt">正在处理,请稍后……</span></td>
        </tr>

    </table>

</body>
</html>

测试通过

 

时间: 2024-12-04 03:46:36

AJAX应用带标题更新的相关文章

使用Jquery的Ajax实现无刷新更新,修改,删除页面

原文:使用Jquery的Ajax实现无刷新更新,修改,删除页面 本文将向大家讲述一下最近工作的一些总结,主要包括了以下内容,注册界面以及详细信息界面的编辑.主要是介绍了AJAX技术,因为我觉得其他方面没什么好介绍的.首先是跟大家说一下Ajax的优点,假如你删除了一个页面的内容,你想当于点击了一个按钮,那么这个页面必然发生了回发事件,也就是说,你的页面必然被刷新了一次.以下是我从网上找来的一张Ajax的原理图,本人PS技术太差了,所以索性从网上找算了. 其实我个人对于Ajax技术的理解并没有上面图

java编程,在屏幕上显示一个带标题的窗口,并添加一个按钮

问题描述 java编程,在屏幕上显示一个带标题的窗口,并添加一个按钮 编写程序,在屏幕上显示一个带标题的窗口,并添加一个按钮,当用户单击按钮时,弹出对话框,显示用户单击了按钮. 解决方案 找点Java 的 Swing学习资料,这种界面估计用netbean或idea都可以自动生成. 解决方案二: import java.awt.Frame; import java.awt.Graphics; import java.awt.GridLayout; import java.awt.event.Act

QFaces1.2 --Ajax方式,带进度条的文件上传组件FileUpload(for JSF)

这是QFaces的第4个组件,Ajax方式带进度条的文件上传组件,我希望每一个重要组件都提升一个版本, 呵呵!这个版本同时修正了ie6下的ajax兼容问题.在介绍完这个组件之后,打算介绍一下如何利用QFaces自 定义自己的Ajax组件,希望这个增强框架能对喜欢JSF的人有一些帮助.后面版本的升级可能就不会这么快, 或者考虑兼容一下facelets,并修正一些可能出现的错误,还有开源计划,然后继续维护并增加一些比较常 用与实用的组件,关注一下JSF2.0的发展等等. 好了,下面介绍一下QFace

win7系统使用自带“自动更新”功能升级win10的方法

  win7系统使用自带"自动更新"功能升级win10的方法 1.点击右下角白色窗口图标,弹出此界面.点击"好的,准备好后通知我"进入下一界面; 2.开始更新后,开始等待; 3.远初使用8M网络,整个升级过程越1小时; 4.整个准备过程约半小时; 5.进入此界面后,点击"接受,开始安装"即可进入安装界面;

JavaScript实现带标题的图片轮播特效

  这里给大家分享的是4屏带标题和文字描述的js图片轮播代码,完美兼容IE6.图片滚动切换,鼠标放到数字选项卡即可切换图片.点击图片跳转到指定页面,有需要的小伙伴可以参考下. 图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4

jquery ajax 局部无刷新更新数据的实现

 这篇文章主要对jquery ajax 局部无刷新更新数据的实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 要更新的页面    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

php+ajax实现带进度条的上传图片功能【附demo源码下载】_php技巧

本文实例讲述了php+ajax实现带进度条的上传图片功能.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: <?php if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK) { ############ Edit settings ############## $UploadDirectory = 'F:

ajax-我想要 AJAX 进行局部页面更新 只更新一個DIV

问题描述 我想要 AJAX 进行局部页面更新 只更新一個DIV 如上 请问我该怎么实作 只更新我想更新的DIV 我不管內容是什麼 只需要定時更新一個DIV即可 解决方案 在ajax返回的方法里面增加 data //你需要更新的内容 $(div/*这里填写你div的id 例如id为divId 则这里填写 "#divId"*/).text(data); 如果是html内容 $(div).html(data); 解决方案二: $('#xxxxx').load('xxxx.url')

图片切换,带标题文字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片切换,带标题文字</titl