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

前端之家收集整理的这篇文章主要介绍了ajax返回数据之前加载loading图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

发送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>
原文链接:https://www.f2er.com/ajax/162364.html

猜你在找的Ajax相关文章