ajax返回数据之前加载loading图标

最新推荐文章于 2025-06-03 09:12:12 发布

misaka去年夏天

最新推荐文章于 2025-06-03 09:12:12 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： ajax jquery HTML loading

本文链接：https://blog.youkuaiyun.com/misakaqunianxiatian/article/details/50927504

js 专栏收录该内容

15 篇文章

订阅专栏

在发送Ajax请求并等待后台响应期间，通过jQuery展示一个loading图标以提示用户数据正在加载。此方法能够提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发送ajax请求的时候，如果后台暂时没有返回数据，一般会显示一个loading图标来提醒用户当前正在加载中。下面直接上代码，用jquery来操作，很方便。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax加载loading图标</title>
</head>
<body>
	<form id="test-form" action="test.php" method="post">
		<input type="text" name="username">
	</form>
	<button  id="btn">提交</button>
	<div id="loading"></div>
	<div id="res"></div>
</body>
<script>
    $('#btn').click(function(){
  	$.ajax({ 
      	url:$('#test-form').attr('action'), //发送后台的url
      	type:'post', 
      	data:$('#test-form').serialize(), //序列化表单内容
      	dataType:'text', //后台返回的数据类型
      	timeout:15000, //超时时间
      	beforeSend:function(XMLHttpRequest){ 
          $("#loading").html("<img src='./images/loading.gif' />"); //在后台返回success之前显示loading图标
     	}, 
     	success:function(data){  //data为后台返回的数据
         	$("#loading").empty(); //ajax返回成功，清除loading图标
         	$('#res').html('ajax请求成功！');
       	}
		}); 
	});
</script>
</html>