前台表单界面代码：
注意
1.引用JQUERY 类库，
2.screenClass.lock 函数中设置等待 gif 的路径 var imgPath = "Images/WaitProcess.gif";
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AsynchronousForm.aspx.cs" Inherits="WaitProcess.AsynchronousForm" %>
<!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">
<title>JQUERY 表单异步提交</title>
<!-- JQUERY 类库 -->
<script language="javascript" type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#myform').submit(function(){
jQuery.ajax({
url: "AsynchronousForm.aspx", // 提交的页面
data: $('#myform').serialize(), // 从表单中获取数据
type: "POST", // 设置请求类型为"POST"，默认为"GET"
beforeSend: function() // 设置表单提交前方法
{
new screenClass().lock();
},
error: function(request) { // 设置表单提交出错
new screenClass().unlock();
alert("表单提交出错，请稍候再试
");
},
success: function(data) {
new screenClass().unlock(); // 设置表单提交完成使用方法
}
});
return false;
});
});
var screenClass = function()
{
/// 解锁
this.unlock = function()
{
var divLock = document.getElementById("divLock");
if(divLock == null) return;
document.body.removeChild(divLock);
};
/// 锁屏
this.lock = function()
{
var sWidth,sHeight;
var imgPath = "Images/WaitProcess.gif";
sWidth = screen.width - 20;
sHeight = screen.height- 170;
var bgObj=document.createElement("div");
bgObj.setAttribute("id","divLock");
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "100";
document.body.appendChild(bgObj);
var html = "<table border=\"0\" width=\""+sWidth+"\" height=\""+sHeight+"\"><tr><td valign=\"middle\" align=\"center\"><image src=\""+imgPath+"\"></td></tr></table>";
bgObj.innerHTML = html;
// 解锁
bgObj.onclick = function()
{
//new screenClass().unlock();
}
};
}
</script>
</head>
<body>
<form id="myform" runat="server">
<div>
姓名：<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox><br />
年龄：<asp:TextBox ID="txtAge" runat="server"></asp:TextBox><br />
备注：<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Rows="6" Columns="60"></asp:TextBox><br />
候时：<asp:TextBox ID="txtWaitTime" runat="server" Text="2000"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
</div>
</form>
</body>
</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;
using System.Threading;
namespace WaitProcess
{
public partial class AsynchronousForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int waitTime = 0;
if (Page.IsPostBack)
{
// 表单数据读写操作
if(!int.TryParse(this.txtWaitTime.Text.Trim(),out waitTime)) waitTime = 2000;
Thread.Sleep(waitTime);
}
}
}
}