JQ-AJAX-简单实用loading效果

怼烎@ 2022-05-11 10:20 193阅读 0赞

在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">
    			
    		</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>

效果：  
![在这里插入图片描述][70]

[70]: /images/20220511/df0648c7c7864af7b3f699f269a2cecf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的 HTML + CSS Loading 效果

简单的 HTML + CSS Loading 效果先看结果HTML<body> <div class="loading"> <spa...

左手的ㄟ右手/ 2024年05月24日 04:20/ 0 赞/ 49 阅读

相关 css实现一个Loading效果

<div class="load"> <span></span> <sp

水深无声/ 2022年10月23日 14:22/ 0 赞/ 218 阅读

相关 react Hooks+axios+antd+TypeScript，简单实现接口请求loading效果

文件后缀为tsx 发送请求时showLoading(), 请求失败hideLoading() import ReactDOM from 'react-dom';

古城微笑少年丶/ 2022年10月16日 06:24/ 0 赞/ 126 阅读

相关用ajax显示loading效果

$.ajax({ type: 'post', url: '/Handler1.a

雨点打透心脏的1/2处/ 2022年05月28日 02:52/ 0 赞/ 190 阅读

相关 JQ-AJAX-简单实用loading效果

在AJAX请求前设置loading效果： <!DOCTYPE html> <html> <head> <meta charse

怼烎@/ 2022年05月11日 10:20/ 0 赞/ 194 阅读

相关 loading效果

1.css .loading{ width: 100%; height: 100%;

喜欢ヅ旅行/ 2022年01月23日 11:13/ 0 赞/ 269 阅读

相关 el-table添加 loading 效果

在el-table标签里面加如下代码，data里面自己定义pictLoading=false，加载数据之前设为true，加载完成之后设为false <el-table

我会带着你远行/ 2021年11月16日 20:16/ 0 赞/ 1219 阅读

相关【loading...页面动画效果】

\\效果如下，动态旋转的加载中动画 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

客官°小女子只卖身不卖艺/ 2021年11月16日 07:24/ 0 赞/ 713 阅读

相关 asterisk简单实用

一、hello wold： 1、启动dadhi、asterisk后，输入下面命令可以进入asterisk的命令行 asterisk -vvgc Aster

我就是我/ 2021年09月15日 00:52/ 0 赞/ 606 阅读

相关 jqAjax Ajax请求

后台php文件一定不能有<-- -->这样的注释和除了echo json\_encode()外其他的 echo ，否则无法传输！！！前台: Ajax

蔚落/ 2021年07月24日 21:52/ 0 赞/ 489 阅读