.NET MVC 给loading数据加 ajax 等待loading效果
程序员文章站
2022-05-20 16:32:27
...
在常用的门户社交类网站中 我们往往会注意到在loading数据的时候 会出现一个loading的效果
对我个人来讲，这样的效果有三个好处...
1，让我们知道我们点击了请求 这时是有回应的
2，防止用户在loading数据的时候点击别的按钮 出现混乱
3，AJax 请求数据更加专业 显得我们的网站更加 friendly-UI
闲话少说，我们开始来讲 如何在网站中 .Net MVC3中正常运用ajax添加这一效果
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<style type="text/css">
/*后面通过设置position、top、bottom、left和right是它可以遮住整个页面，
并且将其背景设置为黑色。*/
.hide{display:none }
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000}
</style>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
</head>
<body>
<div>@RenderBody()</div>
<img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>
<div id="maskOfProgressImage" class="mask hide"></div>
</body>
</html>
在这里 我用GIF图片和<div>遮罩 定义在布局中，并为他们加上相应的css 样式
其中gif图片和遮罩 div的 z-index 分别为2000 & 1000。（只要前者比后者大即可 ，让gif显示在最上层即可）
接下来， 我们通过为jquery定义一个方法ajax2 实现ajax调用
该方法依然调用$.ajax(options)来实现ajax调用
在ajax2方法中我们队options的参数compelte实现封装
让可以显示的gif图片和div隐藏起来，同时覆盖了 options的async属性，
这样 总是以异步的方式来执行。
因为这样浏览器才能不被锁住 gif图片才能正常显示。再用$.load（options）进行ajax请求之前 我们将gif图片显示出来 ，并对他们进行相应的设置。
<script type="text/javascript">
$(function () {
$.load= function (options) {
var img = $("#progressImgage");
var mask = $("#maskOfProgressImage");
var complete = options.complete;
options.complete = function (httpRequest, status) {
img.hide();
mask.hide();
if (complete) {
complete(httpRequest, status);
}
};
options.async = true;
img.show().css({
"position": "fixed",
"top": "50%",
"left": "50%",
"margin-top": function () { return -1 * img.height() / 2; },
"margin-left": function () { return -1 * img.width() / 2; }
});
mask.show().css("opacity", "0.1");
$.ajax(options);
};
});
</script>
最后我们进行ajax调用的时候 去call 这个方法即可 $.load。
<a href="#" id="load">Load</a>
<div id="result"></div>
<script type="text/javascript">
$("#load").click(function () {
$.ajax2({
url: '@Url.Action("GetContacts")',
success: function(result)
{
$("#result").html(result);
}
});
});
</script>
上一篇： 文档中输出数据
下一篇： 使用MySQL命令行备份和恢复数据库
推荐阅读