ajax一个很好的加载效果

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

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

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

使用的时候代码如下:

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

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

 // 提交表单数据到后台处理
 $.ajax({
     type: "post",
     data: studentInfo,
     contentType: "application/json",
     url: "/Home/Submit",
     beforeSend: function () {
         // 禁用按钮防止重复提交
         $(".wrapper").showLoading();
         $("#submit").attr({ disabled: "disabled" });
     },
     success: function (data) {
         if (data == "Success") {
             //清空输入框
             clearBox();
         }
     },
     complete: function () {
         $(".wrapper").hideLoading();
         $("#submit").removeAttr("disabled");
     },
     error: function (data) {
         console.info("error: " + data.responseText);
     }
 });

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

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