ajax执行时提示

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

 

posted @ 2016-09-29 11:01  林豆包的长颈鹿  阅读(266)  评论(0)  编辑  收藏  举报