JQ-AJAX-简单实用loading效果

最新推荐文章于 2024-06-20 16:11:11 发布

半笙彷徨

最新推荐文章于 2024-06-20 16:11:11 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： JQ AJAX 简单实用loading

本文链接：https://blog.csdn.net/wang704987562/article/details/82812058

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

在AJAX请求前设置loading效果：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.modal {
				display: none;
				position: fixed;
				z-index: 1000;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background: rgba( 255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
			}
			
			body.loading .modal {
				display: block;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<img src="./18985bf22cef636551d902842e5d25f8.jpg" />
		<div class="modal">
			<!-- Place at bottom of page -->
		</div>

	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(document).ajaxStart(function() {
			$("body").addClass("loading");
		})
		.ajaxStop(function() {
			$("body").removeClass("loading");
		});
		$.ajax({
			type: "get",
			url: "http://localhost:8080/test/ok",
			dataType: "json",
			success: function(data) {
				console.log("success")
			},
			error: function(e) {
				console.log("error")
			},
		});
	</script>

</html>

效果：
在这里插入图片描述

半笙彷徨

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQ-AJAX-简单实用loading效果

在AJAX请求前设置loading效果：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .modal { display: none; positio
复制链接

扫一扫

专栏目录