jQuery ajaxComplete()方法，判断ajax请求状态

最新推荐文章于 2022-05-05 14:43:43 发布

西风XF

最新推荐文章于 2022-05-05 14:43:43 发布

阅读量7.1k

点赞数 1

分类专栏： jQuery 文章标签： jQuery ajax ajaxComplete 判断ajax请求状态

本文链接：https://blog.csdn.net/qq_36242361/article/details/73614230

版权

jQuery 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

写博客的初衷，是让自己记一下笔记，以前遇到技术点或者小的知识点，都会写在文档里，需要的时候自己再翻出来看。可是可是。。。后来某些原因，之前记录的一些重要文档丢了。。。心疼好长时间，血和泪的教训，才想着用博客记录下来，还能方便一些需要的人看到。

当ajax遇上网络不给力，或者接口请求数据时间较长，页面会处于假死的状态，会让用户很不耐烦，需要判断一下ajax的状态，给用户一个提示。

实现效果：当ajax请求时，请求中会出现Loading的字样，请求结束Loading消失。

知识点：

$.ajax;//jQuery封装的ajax获取数据的方法，参数设置可以参考另外的文章

ajaxStart();//ajax开始加载但还未加载完成

ajaxComplete();//ajax加载完成

另外：

用alert是为了禁止后面代码的执行，比较清楚的看到执行步骤
button点击事件触发顺序：
1、先触发ajaxStart事件，弹框先弹出1;
2、点击弹框的确定后，button发出ajax请求但是还没获取到数据，会触发弹框2但是Loading会处于block状态
3、弹框2执行后，加载数据完成，Loading处于none状态

代码demo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.btn{
				margin:20px 0 20px 50px;
			}
			table{
				border-collapse: collapse;
				width:200px;
			}
			table thead th{
				height:30px;
				width:50px;
				border: 1px solid #000;
			}
			table tbody tr td{
				height:30px;
				width:50px;
				border: 1px solid #000;
				text-align: center;
			}
			.loading{
				width:200px;
				margin-top: 20px;
				text-align: center;
				display: none;
			}
		</style>
	</head>
		<div class="oDiv">
			<button class="btn">获取数据</button>
			<table>
				<thead>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>城市</th>
				</thead>
				<tbody id="tbody">
					<!--<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>-->
				</tbody>
			</table>
			<div class="loading">
				Loading
			</div>
		</div>
	<body>
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			$(document).ajaxStart(function(){
				$(".loading").css("display","block");
				alert(1);
			});
			
			$(document).ajaxComplete(function(){
				$(".loading").css("display","none");
				alert(2);
			})
			//用alert是为了禁止后面代码的执行，比较清楚的看到执行步骤
			/*** button点击事件触发顺序：
			 * 1、先触发ajaxStart事件，弹框先弹出1;
			 * 2、点击弹框的确定后，button发出ajax请求但是还没获取到数据，会触发弹框2但是Loading会处于block状态
			 * 3、弹框2执行后，加载数据完成，Loading处于none状态
			 * 
			 ***/
			$('.btn').on('click',function(){
				
				$.ajax({
					type:"get",
					url:"mock.json",
					async:true,
					dataType:"json",
					success:function(res){
						console.log(res)
						var len = res.data.length;
						var ht = '';
						$.each(res.data, function(i,n) {
							ht += '<tr id="'+(i+1)+'">'+
										'<td>'+(i+1)+'</td>'+
										'<td>'+n.name+'</td>'+
										'<td>'+n.age+'</td>'+
										'<td>'+n.city+'</td>'+
									'</tr>';
						});
						$("#tbody").html(ht);
					}
				});
			});
			
		});
		
		
		
	</script>
</html>

json文件：mock.json

{
	"data":[
		{
			"name":"张三",
			"age":10,
			"city":"北京"
		},
		{
			"name":"李四",
			"age":11,
			"city":"上海"
		},
		{
			"name":"王五",
			"age":12,
			"city":"广州"
		},
		{
			"name":"赵六",
			"age":13,
			"city":"深圳"
		},
		{
			"name":"月七",
			"age":11,
			"city":"天津"
		}
	]
}

西风XF

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery ajaxComplete()方法，判断ajax请求状态

写博客的初衷，是让自己记一下笔记，以前遇到技术点或者小的知识点，都会写在文档里，需要的时候自己再翻出来看。可是可是。。。后来某些原因，之前记录的一些重要文档丢了。。。心疼好长时间，血和泪的教训，才想着用博客记录下来，还能方便一些需要的人看到。当ajax遇上网络不给力，或者接口请求数据时间较长，页面会处于假死的状态，会让用户很不耐烦，需要判断一下ajax的状态，给用户一个提示。
复制链接

扫一扫