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

来源：互联网发布：hello语音聊天软件编辑：程序博客网时间：2024/04/30 17:55

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

0 0