jQuery ajax加载效果，Loading的两种方法
前端
2023-12-12
1246
jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作，在使用jquery提交一个表单的同时，不让用户点击其他的按钮，需要在提交数据的同时给出一个遮罩的loading动画。
一、可以用自带的beforeSend
$('#id').click(function(){
$.ajax({
type:"get",
url:"api.php",
beforeSend:function(){
//等待延迟的函数
},
success:function(data){
//代码
}
});
})
二、使用showLoading插件
1、下载插件，官方下载地址：https://codepen.io/
2、在页面中引入文件
<link href="showLoading.css" rel="stylesheet" media="screen" />
<script src="jquery.showLoading.min.js"></script>
3、在页面中声明一个想要用来遮罩的容器，比如一个div，如果需要全屏的话，直接选择body标签，如下：
<body id="loading"> ...<body>
4、调用showLoading()和hideLoading()方法：
<script>
jQuery('#loading').showLoading();
jQuery('#loading').hideLoading();
</script>5、修改Loading的动画图标，可以修改为自己喜欢的gif动画。
.loading-indicator {
height: 80px;
width: 80px;
background: url( '/img/loading.gif' ); //修改此处图片地址即可。
background-repeat: no-repeat;
background-position: center center;
}
三、showLoading插件搭配beforeSend提高用户体验：
// 提交表单数据到后台处理
$.ajax({
type: "post",
data: studentInfo,
dataType:"json",
url: "api.php",
beforeSend: function () {
// 禁用按钮防止重复提交
$("#loading").showLoading();
$("#submit").attr({ disabled: "disabled" });
},
success: function (data) {
if (data == "Success") {
//清空输入框
clearBox();
}
},
complete: function () {
$("#loading").hideLoading();
$("#submit").removeAttr("disabled");
},
error: function (data) {
console.info("error: " + data.responseText);
}
});
本站涵盖的内容、图片、视频等数据系网络收集，部分未能与原作者取得联系。若涉及版权问题，请联系我们进行删除！谢谢大家！
jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作，在使用jquery提交一个表单的同时，不让用户点击其他的按钮，需要在提交数据的同时给出一个遮罩的loading动画。
一、可以用自带的beforeSend
$('#id').click(function(){
$.ajax({
type:"get",
url:"api.php",
beforeSend:function(){
//等待延迟的函数
},
success:function(data){
//代码
}
});
})二、使用showLoading插件
1、下载插件，官方下载地址：https://codepen.io/
2、在页面中引入文件
<link href="showLoading.css" rel="stylesheet" media="screen" /> <script src="jquery.showLoading.min.js"></script>
3、在页面中声明一个想要用来遮罩的容器，比如一个div，如果需要全屏的话，直接选择body标签，如下：
<body id="loading"> ...<body>
4、调用showLoading()和hideLoading()方法：
<script>
jQuery('#loading').showLoading();
jQuery('#loading').hideLoading();
</script>5、修改Loading的动画图标，可以修改为自己喜欢的gif动画。
.loading-indicator {
height: 80px;
width: 80px;
background: url( '/img/loading.gif' ); //修改此处图片地址即可。
background-repeat: no-repeat;
background-position: center center;
}三、showLoading插件搭配beforeSend提高用户体验：
// 提交表单数据到后台处理
$.ajax({
type: "post",
data: studentInfo,
dataType:"json",
url: "api.php",
beforeSend: function () {
// 禁用按钮防止重复提交
$("#loading").showLoading();
$("#submit").attr({ disabled: "disabled" });
},
success: function (data) {
if (data == "Success") {
//清空输入框
clearBox();
}
},
complete: function () {
$("#loading").hideLoading();
$("#submit").removeAttr("disabled");
},
error: function (data) {
console.info("error: " + data.responseText);
}
});本站涵盖的内容、图片、视频等数据系网络收集，部分未能与原作者取得联系。若涉及版权问题，请联系我们进行删除！谢谢大家！
