【转】JQUERY的表单异步提交

jasoncao1985

浏览: 41395 次
性别:
来自: 黑龙江

最近访客更多访客>>

随逸0

壹周关注

maying247140

yqy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Linq UI Web Ajax

<%@ 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);
            }
        }
    }
}

资源来自http://www.cnitblog.com/hj627/articles/61395.html

分享到：