添加一个提示操作正在执行请等待的浮动层的几种方法
1.用的是MS的UPDATEPANLE做AJAX时可以采用下面的
Sys.WebForms.PageRequestManager 类
管理服务器 UpdatePanel 控件在浏览器中的部分页更新，并通过使用客户端脚本定义属性、事件和方法以自定义 Web 页。
<div id="BusyDialog" class="BusyDialogDiv">
<asp:Image runat="server" ID="BusyImage" ImageUrl="http://images.cnblogs.com/Indicator.gif" />
</div>
<script type="text/javascript">
function showDialogue() {
DivDialog.ShowModalDialog('BusyDialog');
}
DivDialog.CloseDialog('BusyDialog');
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(beginLoading);
function beginRequest(sender, args) {
DivDialog.ShowModalDialog('BusyDialog');
}
function beginLoading(sender, args) {
DivDialog.CloseDialog('BusyDialog');
}
</script>
这部分代码对所有UPDATE里的有刷新动作的都有用
2.JQUERY 处理
jquery中ajaxSend的问题
这样在onClick某一个DIV的情况下，所有的容器都会响应ajaxSend(...)里的函数。如何只限制单击ID的容器响应相对的ajaxSend(...)？
解决方案：
根据这个方法的定义，当发送ajax请求的时候，jQuery会触发所有的ajaxSend事件。但是你可以通过传入的参数来控制当ajax请求发生时，让那个event执行。
例如,根据ajax请求里的url参数来区分
$('#div').ajaxSend(function(e, xhr, settings) {
if (settings.url == '/ajax/test') {
...
}
});
$('#div2').ajaxSend(function(e, xhr, settings) {
if (settings.url == '/ajax/test2') {
...
}
});
追问$('#div2').ajaxSend(function(e, xhr, settings) {
$('#div2').html('...'); //这里也指定了容器，为什么不在这里面执行，而还是全部执行呢？
});
这和容器div，div2...是没关系的，官方文档写得很明白不管你设置了多少个ajaxsend callback在有ajax请求的时候都会一起触发。除非用传递的参数区分，在这里ajax请求发生的时候他不知道div，div2...
只是单纯地执行所有预先设置的ajaxSend callback。 你可以在firebug里看一下传入的e里面有没有你需要可以用来区分点击范围的变量
举例：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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>Index</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function cookieInfo() {
var cookie = document.cookie;
var name = "";
if (cookie != "") {
var begin = cookie.indexOf('=') + 1;
name = cookie.substring(begin, cookie.length);
}
return name;
}
$(function() {
if (cookieInfo() == "") {
$("#login").show();
$("#logInfo").hide();
}
else {
$("#login").hide();
$("#logInfo").show();
}
$("#login").ajaxSend(function() {
$(this).hide();
$("#showLog").show();
$("#showLog").html("请等待...");
});
$("#btnLogin").click(function() {
$.post("/User/Login", { name: $("#txtName").val(), pwd: $("#txtPwd").val() },
function(data) {
$("#login").show();
$("#showLog").hide();
if (data.indexOf("ok") != -1) {
//alert(document.cookie);
var name = cookieInfo();
$("#login").html("欢迎你:" + name + "<a href='/User/Logout'>注销</a>");
}
else {
if ($("#login").html().indexOf("用户名或密码错误") == -1)
$("#login").prepend("用户名或密码错误<br>");
}
});
});
});
function dologout() {
$.get("/User/Logout", function(data) {
$("#login").show();
$("#logInfo").hide();
$("#showLog").hide();
});
}
</script>
</head>
<body>
<div id="login">
用户名：<input type="text" name="txtName" id="txtName" /><br />
密码：<input type="password" name="txtPwd" id="txtPwd" /><br />
<input type="button" value="登陆" id="btnLogin"/>
</div><div id="showLog"></div>
<div id="logInfo">欢迎你:<%=this.Request.Cookies["user"]==null?"":Request.Cookies["user"].Value%><a href='javascript:dologout()'>注销</a>
</div>
</body>
</html>
