4000-9696-28

.NET MVC 给loading数据加 ajax 等待loading效果

2013年05月09日 09:29供稿中心:北大青鸟总部

摘要: 在常用的门户社交类网站中 我们往往会注意到在loading数据的时候 会出现一个loading的效果.


在常用的门户社交类网站中 我们往往会注意到在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>
关于我们
公司简介
发展历程
青鸟荣誉
联系我们
加入我们
青鸟课程
ACCP
学士后Java
BENET
启蒙星IT工程师基础课程
学习客户端下载
青鸟优师
青鸟微讯
回顶部 新版反馈 回到首页
官方新版意见收集

*

官方新版意见收集

提交成功,感谢您的反馈。

我们会认真阅读和考虑每个用户的反馈。