【JavaWeb】Ajax+loading加载动画实现方式
程序员文章站
2022-05-27 14:57:18
...
【loading加载动画】
- 第一种loading效果
#1-> [CSS] 样式文件中添加如下样式代码，注意标签[#loader]
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
/*width: 20px;*/
/*height: 20px;*/
margin: -25px 0 0 -25px;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #00A76F;
border-bottom: 6px solid #00A76F;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}#2-> index.jsp文件[body]中添加<div>，设置id="loader"
<body>
<div id="loader"></div>
</body>- 第二种loading效果
#1-> [CSS] 样式文件中添加如下样式代码，注意标签[#fountainG]
#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px}
.fountainG{
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
}
#fountainG_1{
left:0;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
}
@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
}
100%{
-moz-transform:scale(.3);
background-color:#0099cc;
}
}
@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
}
100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
}
}
@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
}
100%{
-ms-transform:scale(.3);
background-color:#0099cc;
}
}
@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
}
100%{
-o-transform:scale(.3);
background-color:#0099cc;
}
}
@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
}
100%{
transform:scale(.3);
background-color:#0099cc;
}
}#2-> index.jsp文件[body]中添加<div>，设置id="fountainG"
<body>
<div id="fountainG">
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
</body>【Ajax】
- 第一种实现方式
在页面开始加载时运行 -> window.onload = function(){}
在ajax开始时运行 -> $(document).ajaxStart -> <div-loader>显示 -> loading.show()
在ajax完成时运行 -> $(document).ajaxSuccess - <div-loader>隐藏 -> loading.hide()
<script type="text/javascript">
window.onload = function () {
function loadingEffect() {
var loading = $('#loader');
loading.hide();
$(document).ajaxStart(function () {
loading.show();
}).ajaxSuccess(function () {
loading.hide();
});
}
loadingEffect();
}
</script>- 第二种实现方式
#1-> ajax-async:true - 默认为true(异步)，false(同步)
#2-> beforeSend：showLoad() - ajax请求发送之前加载loading动画
#3-> error + complete : hiddenLoad() - ajax请求成功以后以及发生错误的情况下隐藏loading动画
<script type="text/javascript">
window.onload = function () {
//加载动画效果
function showLoad(){
$('#fountainG').show();
}
//隐藏动画效果
function hiddenLoad(){
$('#fountainG').hide();
}
$.ajax({
type:"post",
url:"TableDemoServlet",
async:true, //默认-异步（true） 同步-false
dataType:"json",
beforeSend: function (){
//ajax刷新前加载load动画
showLoad();
},
success:function () {
//write code
},
error:function (e) {
//隐藏load动画
hiddenLoad();
},
complete:function () {
//完成以后隐藏load动画
hiddenLoad();
}
});
}
</script>【完整代码】
主要实现
#1-> 从SQL Server数据库中读取数据显示在表格上，
#2-> 后台Servlet通过JSONArray传值到前端
#3-> 前端通过ajax接收最终显示在JSP页面上
写了两个页面，共用一个CSS文件
- index.jsp -> loading[fountainG] + ajax方法2 实现
- test.jsp -> loading[loader] + ajax方法1实现
<%--
Created by IntelliJ IDEA.
User: Coraline
Date: 2018/8/29
Time: 10:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>TableDemo</title>
<%--给标题左侧加上logo--%>
<link rel="shortcup icon" href="pic/flower_72px_1132301_easyicon.net.png">
<%--链接外部样式表--%>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="./scripts/jquery.min.js"></script>
<%--写业务逻辑--%>
<script type="text/javascript">
window.onload = function () {
//加载动画效果
function showLoad(){
$('#fountainG').show();
}
//隐藏动画效果
function hiddenLoad(){
$('#fountainG').hide();
}
$.ajax({
type:"post",
url:"TableDemoServlet",
async:true, //默认-异步（true） 同步-false
dataType:"json",
beforeSend: function (){
//ajax刷新前加载load动画
showLoad();
},
success:function (dataArray) {
var tableBody = "<tbody id='tableBody'>";
for (var i = 0; i < dataArray.length; i++) {
tableBody += "<tr>";
tableBody += "<td>"+dataArray[i]['ID']+"</td>";
tableBody += "<td>"+dataArray[i]['username']+"</td>";
tableBody += "<td>"+dataArray[i]['birthdate']+"</td>";
tableBody += "<td>"+dataArray[i]['nationality']+"</td>";
tableBody += "</tr>";
}
tableBody += "</tBody>";
$("tbody#tableBody").remove();//删除已有表格
$("#tableHead").after(tableBody);
},
error:function (e) {
//隐藏load动画
hiddenLoad();
alert("错误！"+e.status);
},
complete:function () {
//完成以后隐藏load动画
hiddenLoad();
//表格隔行显色，鼠标悬浮高亮显示
var oTab = document.getElementById('tbl');
var oldColor = '';//用于保存原来一行的颜色
for(var i = 0; oTab.tBodies[0].rows.length; i++){
//当鼠标移上去，改变字体色-背景色
oTab.tBodies[0].rows[i].onmouseover = function () {
oldColor = this.style.background;
this.style.background = "#009B63";
this.style.color = "#ffffff";
};
//当鼠标移开，恢复原来的颜色
oTab.tBodies[0].rows[i].onmouseout = function () {
this.style.background = oldColor;
this.style.color = "#000000";
};
//隔行显色
if(i%2){
oTab.tBodies[0].rows[i].style.background = "#EAF2D3";
}
else{
oTab.tBodies[0].rows[i].style.background = "";
}
}
}
});
}
</script>
</head>
<body>
<table id="tbl" align="center">
<caption>User Account Information</caption>
<thead id="tableHead">
<tr>
<th>ID</th>
<th>UserName</th>
<th>Birthdate</th>
<th>Nationality</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<%--load动画效果--%>
<div id="fountainG">
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: Coraline
Date: 2018/8/29
Time: 10:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>TableDemo</title>
<%--给标题左侧加上logo--%>
<link rel="shortcup icon" href="pic/flower_72px_1132301_easyicon.net.png">
<%--链接外部样式表--%>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="./scripts/jquery.min.js"></script>
<%--写业务逻辑--%>
<script type="text/javascript">
window.onload = function () {
function loadingEffect() {
var loading = $('#loader');
loading.hide();
$(document).ajaxStart(function () {
loading.show();
}).ajaxSuccess(function () {
loading.hide();
});
}
loadingEffect();
$.ajax({
type:"post",
url:"TableDemoServlet",
async:true, //默认-异步（true） 同步-false
dataType:"json",
success:function (dataArray) {
var tableBody = "<tbody id='tableBody'>";
for (var i = 0; i < dataArray.length; i++) {
tableBody += "<tr>";
tableBody += "<td>"+dataArray[i]['ID']+"</td>";
tableBody += "<td>"+dataArray[i]['username']+"</td>";
tableBody += "<td>"+dataArray[i]['birthdate']+"</td>";
tableBody += "<td>"+dataArray[i]['nationality']+"</td>";
tableBody += "</tr>";
}
tableBody += "</tBody>";
$("tbody#tableBody").remove();//删除已有表格
$("#tableHead").after(tableBody);
},
error:function (e) {
alert("错误！"+e.status);
},
complete:function () {
var oTab = document.getElementById('tbl');
var oldColor = '';//用于保存原来一行的颜色
for(var i = 0; oTab.tBodies[0].rows.length; i++){
oTab.tBodies[0].rows[i].onmouseover = function () {
oldColor = this.style.background;
this.style.background = "#009B63";
this.style.color = "#ffffff";
};
oTab.tBodies[0].rows[i].onmouseout = function () {
this.style.background = oldColor;
this.style.color = "#000000";
};
if(i%2){
oTab.tBodies[0].rows[i].style.background = "#EAF2D3";
}
else{
oTab.tBodies[0].rows[i].style.background = "";
}
}
}
});
}
</script>
</head>
<body>
<table id="tbl" align="center">
<caption>User Account Information</caption>
<thead id="tableHead">
<tr>
<th>ID</th>
<th>UserName</th>
<th>Birthdate</th>
<th>Nationality</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<div id="loader"></div>
</body>
</html>
#tbl
{
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
width: 30%;
border-collapse: collapse;
}
#tbl caption
{
font-size: 2em;
color: #009B63;
font-weight: bold;
}
#tbl th
{
font-size: 1.1em;
border: 1px solid rgb(0,136,88);
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
color: #ffffff;
background-color: #009B63;
width: 10%;
}
#tbl td
{
font-size:1em;
border: 1px solid #98bf21;
padding: 3px 3px 3px 3px;
width: 10%;
}
/*----------------------------加载loading动画效果---1-----------------------------*/
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
/*width: 20px;*/
/*height: 20px;*/
margin: -25px 0 0 -25px;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #00A76F;
border-bottom: 6px solid #00A76F;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*----------------------------加载loading动画效果---2-----------------------------*/
#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px}
.fountainG{
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
}
#fountainG_1{
left:0;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
}
@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
}
100%{
-moz-transform:scale(.3);
background-color:#0099cc;
}
}
@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
}
100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
}
}
@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
}
100%{
-ms-transform:scale(.3);
background-color:#0099cc;
}
}
@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
}
100%{
-o-transform:scale(.3);
background-color:#0099cc;
}
}
@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
}
100%{
transform:scale(.3);
background-color:#0099cc;
}
}Servlet传过来的JSONArray
[{"ID":1,"birthdate":"1989-10-14","nationality":"Australia","username":"Mia Wasikowska"},{"ID":2,"birthdate":"1963-06-09","nationality":"USA","username":"Johnny Depp"},{"ID":3,"birthdate":"1966-05-26","nationality":"England","username":"Helena Bonham Carter"},
{"ID":4,"birthdate":"1982-11-12","nationality":"NewYork","username":"Anne Hathaway"},{"ID":5,"birthdate":"1969-02-05","nationality":"England","username":"Michael Sheen"},{"ID":6,"birthdate":"1964-04-20","nationality":"USA","username":"Crispin Glover"},{"ID":7,"birthdate":"1958-08-25","nationality":"USA","username":"Tim Burton"}]【实现效果】
- index.jsp
- test.jsp
【参考】
https://www.cnblogs.com/lengzhijun/p/4708431.html
https://www.cnblogs.com/zengdingxin/archive/2016/08/01/5725061.html
js实现ajax加载过程中Loading效果
上一篇： 中年人如何预防肾虚,预防肾虚有妙招
下一篇： jsp页面“更多”和“收起”