ajax一个很好的加载效果

推荐一个常用的jquery加载效果插件：

要引入这个插件的css和js:

1 <link href="<%=path %>/css/showLoading.css" rel="stylesheet" media="screen" />
2 <script type="text/javascript" src="<%=path %>/js/jquery.showLoading.min.js"></script> 

使用的时候代码如下:

1 $(".wrapper").showLoading();  //展示加载效果 wrapper为你需要加载效果的div， 也可以用body
2 $(".wrapper").hideLoading();  //取消加载效果

ajax完整效果如下,搭配ajaX的beforeSend提高用户体验：

 1 // 提交表单数据到后台处理
 2 $.ajax({
 3     type: "post",
 4     data: studentInfo,
 5     contentType: "application/json",
 6     url: "/Home/Submit",
 7     beforeSend: function () {
 8         // 禁用按钮防止重复提交
 9         $(".wrapper").showLoading();
10         $("#submit").attr({ disabled: "disabled" });
11     },
12     success: function (data) {
13         if (data == "Success") {
14             //清空输入框
15             clearBox();
16         }
17     },
18     complete: function () {
19         $(".wrapper").hideLoading();
20         $("#submit").removeAttr("disabled");
21     },
22     error: function (data) {
23         console.info("error: " + data.responseText);
24     }
25 });

jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作。

$.ajax({
    beforeSend: function(){
     // Handle the beforeSend event
    },
    complete: function(){
     // Handle the complete event
    }
    // ......
});