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

发布时间：2020-12-16 01:42:14 所属栏目：百科来源：网络整理

导读：发送ajax请求的时候，如果后台暂时没有返回数据，一般会显示一个loading图标来提醒用户当前正在加载中。下面直接上代码，用jquery来操作，很方便。 !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleajax加载loading图标/title/headbodyform id="te

发送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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!