ajax一个很好的加载效果

推荐一个常用的jquery加载效果插件,很适合开发中使用。

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

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

使用的时候代码如下:

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

ajax完整效果

搭配ajaX的beforeSend提高用户体验:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 提交表单数据到后台处理
$.ajax({
type: "post",
data: studentInfo,
dataType:"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介绍

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

1
2
3
4
5
6
7
8
9
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});

文章目录
  1. 1. 要引入这个插件的css和js:
  2. 2. 使用的时候代码如下:
  3. 3. ajax完整效果
  4. 4. jquery介绍