JS 设置按钮的loading效果

本文是在其他博主的博客JS学习笔记 | 遮罩层Loading实现_jsp loading-CSDN博客基础上，进行实践的。

目录

一、需求

二、Jsp+css实现代码

一、需求

在springboot项目中的原始html5页面中，原本的功能是页面加载时，使用ajax向后端发送请求，后端返回的数据是一个map类型的数据。前端拿到数据之后，作为下拉框select标签的选项。

目前想要在这个基础上添加一个loading效果。使得在点击按钮后和ajax请求前显示loading效果，请求返回数据之后去掉loading效果。

二、Jsp+css实现代码

（1）首先，添加div标签，放在body下的第一个位置。

<div id="loading">
    <img src="images/loading.gif">
    <p>请稍候....</p>
</div>

其中，图片路径如下，

（2）使用css样式，给#loading设置背景颜色，覆盖整个页面。把这个div标签展示在页面中间，实现页面效果：动图下面有一行文字“请稍后”。

下面是完整的 HTML 和 CSS 代码，实现覆盖整个页面的背景色，并将 loading 显示在页面中间：

<div id="loading">
    <img src="images/loading.gif">
    <p>请稍后</p>
</div>

<style>
    #loading {
        /* 固定定位，覆盖整个页面 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 背景色（可以调整颜色和透明度） */
        background-color: rgba(255, 255, 255, 0.8);  /* 半透明白色背景 */
        /* 确保在最上层 */
        z-index: 9999;

        /* 使用flex布局使内容居中 */
        display: flex;
        flex-direction: column;  /* 垂直排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center;     /* 水平居中 */
    }

    #loading img {
        /* 图片样式 */
        display: block;
        margin-bottom: 10px;  /* 图片和文字之间的间距 */
    }

    #loading p {
        /* 文字样式 */
        margin: 0;
        color: #666;
        font-size: 14px;
    }
</style>

关键样式说明：

• position: fixed - 固定定位
• top: 0; left: 0; - 从页面左上角开始
• width: 100%; height: 100%; - 占满整个页面
• background-color - 背景色（可以根据需要调整）
• display: flex - 使用flex布局实现居中
• flex-direction: column - 内容垂直排列
• justify-content: center - 垂直居中
• align-items: center - 水平居中

你可以根据需要调整样式：

• 背景色
• 图片和文字的间距
• 文字的颜色和大小
• z-index的值（确保显示在最上层）

这样，动图和文字就会出现在页面上，且文字位于动图的下方。

（3）接下来，在前端HTML文件中编写JavaScript代码，通过ajax发送请求， 

function search() {
	//点击查询按钮重新显示loading
	$('#loading').show();
	$.ajax({
		url : "/xxx/xxx",
		type : 'GET',
		success : function(data) {
			//成功后 隐藏loading框，
			$('#loading').hide();
			// 解析数据
		},
		error : function() {
			slert("error");
		}
	})
}

（4）使用浏览器打开html文件，

页面效果如下，