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,
    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方法，用于在向服务器发送请求前执行一些动作。

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