发送ajax请求的时候,如果后台暂时没有返回数据,一般会显示一个loading图标来提醒用户当前正在加载中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery.js"></script> 7 </head> 8 <body> 9 <form action="" id='reg'> 10 用户名:<input type="text" name='username'><br> 11 密码:<input type="text" name='password'><br> 12 邮箱:<input type="text" name='email'><br> 13 <input type="button" value="提交"> 14 </form> 15 <span></span> 16 <img src="ajax-loader.gif" alt="" style="display:none" id='image'> 17 <script> 18 19 $('input[type=button]').click(function(){ 20 var Sdata = $('#reg').serialize(); 21 $.ajax({ 22 url:'29.php', 23 type:'post', 24 data:Sdata, 25 //方法二: 26 beforeSend:function(){ 27 $('span').html('<img src="ajax-loader.gif" alt="" >');; 28 }, 29 success:function(redata){ 30 $('span').html(redata); 31 } 32 }); 33 }); 34 //方法一: 35 $('#image').ajaxStart(function(){ 36 $('#image').show(); 37 }).ajaxStop(function(){ 38 $('#image').hide(); 39 }); 40 </script> 41 </body> 42 </html>