AJAX动态加载评论

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>评论动态加载</title>
  6     <style type="text/css">
  7         .comment{
  8             background: #FFF;
  9             #border-bottom: red solid;
 10             width: 600px;
 11             height: 80px;
 12         }
 13         .comment div img{
 14             width: 80px;
 15             height: 80px;
 16         }
 17         .left{
 18             float: left;
 19             width: 80px;
 20             height: 80px;
 21             background: blue;
 22         }
 23         .right{
 24             float: right;
 25             width: 520px;
 26             height: 80px;
 27         }
 28         #container{
 29             position: relative;
 30             left: 50%;
 31             width: 600px;
 32             margin-left: -300px;
 33         }
 34         #container ul{
 35             padding-left: 0px;
 36             list-style: none;
 37         }
 38         #more{
 39             background: lightGray;
 40             height: 30px;
 41             line-height: 30px;
 42             text-align: center;
 43             cursor: pointer;
 44         }
 45     </style>
 46     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 47 </head>
 48 <body>
 49 <div style="height:300px;"></div>
 50 <div id="container">
 51 <ul id="contentList">
 52     <li class="comment">
 53         <div class="left"><img src="./g1.jpg"></div>
 54         <div class="right">
 55             <div>一篇工作总结</div>
 56             <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>
 57         </div>
 58     </li>
 59     <hr>
 60     <li class="comment">
 61         <div class="left"><img src="./g.jpg"></div>
 62         <div class="right">
 63             <div>一篇工作总结</div>
 64             <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>
 65         </div>
 66     </li>
 67     <hr>
 68     
 69 </ul>
 70 <div id="more">加载更多...</div>
 71 <input type="hidden" id="last" value="0">
 72 </div>
 73 
 74 <script type="text/javascript">
 75     $(function(){
 76         $('#more').click(function(){
 77             var last = $('#last').val();
 78             var url = './data.php?last='+last+'&amount=2';
 79             queryComment(url);
 80         });
 81     });
 82 
 83     function queryComment(url){
 84         $.ajax({
 85             type : "get",
 86             async: true,
 87             url : url,
 88             dataType : "json",
 89             success : function(data){
 90                 if(data == 1){
 91                     $('#more').html('没有更多评论!').unbind('click');
 92                     return false;
 93                 }
 94                 $.each(data,function(i,element){
 95                     var nickname = element.nickname;
 96                     var content = element.content;
 97                     var time = element.time;
 98                     var imgpath = element.imgpath;
 99                     var info = $('<li class="comment"><div class="left"><img src="'+imgpath+'"></div><div class="right"><div>'+nickname+'</div><div></div>'+content+'</div></li><hr>');
100                     $('#contentList').append(info);
101                 });
102                 var now = parseInt($('#last').val()) + 2;
103                 $('#last').val(now);
104             },
105             error:function(){
106                 console.log('fail');
107             }
108         });
109     }
110 </script>
111 </body>
112 </html>