白开心

  IT博客 :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
前台表单界面代码:
注意
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 == nullreturn;
            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);
            }
        }
    }
}


posted on 2009-09-14 11:54 白开心 阅读(20162) 评论(8)  编辑 收藏 引用 所属分类: JavaScript

评论

# re: JQUERY的表单异步提交 2009-11-11 16:02 一吻
看了这个做了个提交页面,调试了好久发现总是不成功。

原来 return false;

要改成 return true;

狂晕。。。。。。。

return false 原来只是前台验证, 根本不提交。。。  回复  更多评论
  

# re: JQUERY的表单异步提交 2009-11-11 16:42 一吻
@一吻

上面还是不行, true是普通的提交方式了, 不是异步了

晕咯  回复  更多评论
  

# re: JQUERY的表单异步提交[未登录] 2009-11-20 15:09 白开心
@一吻
不会吧?偶的代码都是经过测试才放上来的...  回复  更多评论
  

# re: JQUERY的表单异步提交 2009-11-23 09:08 李sir
可以成功,非常感谢  回复  更多评论
  

# ff有问题 2010-01-21 09:33 amo
写了一段类似的代码
首先,为页面所有表单绑定事件

$("form").submit( function () {
ajax_data = $(this).serialize(); //表单数据
ajax_url = $(this).attr('action'); //表单目标
ajax_type = $(this).attr('method'); //提交方法
$.ajax({
cache: false,
type:ajax_type, //表单提交类型
url:ajax_url, //表单提交目标
data:ajax_data, //表单数据
success:function(){$('#desktop').html(arguments[0]);liveform();} //提交成功时刷新局部页面
});
return false; //阻止表单的默认提交事件
});

经测试在IE下可以正常使用,在火狐下出错。没有触发
return false; //阻止表单的默认提交事件

请问高人应该如何解决。

预祝新年愉快:)  回复  更多评论
  

# re: JQUERY的表单异步提交 2012-09-19 10:21 fdsf
sf  回复  更多评论
  

# re: JQUERY的表单异步提交 2014-05-22 18:03 123
eqedqedasd  回复  更多评论
  

# re: JQUERY的表单异步提交[未登录] 2015-10-10 08:34 111
1111111  回复  更多评论
  

只有注册用户登录后才能发表评论。