<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>评论动态加载</title>

     <style type="text/css">

         .comment{

             background: #FFF;

             #border-bottom: red solid;

             width: 600px;

             height: 80px;

         }

         .comment div img{

             width: 80px;

             height: 80px;

         }

         .left{

             float: left;

             width: 80px;

             height: 80px;

             background: blue;

         }

         .right{

             float: right;

             width: 520px;

             height: 80px;

         }

         #container{

             position: relative;

             left: 50%;

             width: 600px;

             margin-left: -300px;

         }

         #container ul{

             padding-left: 0px;

             list-style: none;

         }

         #more{

             background: lightGray;

             height: 30px;

             line-height: 30px;

             text-align: center;

             cursor: pointer;

         }

     </style>

     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

 </head>

 <body>

 <div style="height:300px;"></div>

 <div id="container">

 <ul id="contentList">

     <li class="comment">

         <div class="left"><img src="./g1.jpg"></div>

         <div class="right">

             <div>一篇工作总结</div>

             <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>

         </div>

     </li>

     <hr>

     <li class="comment">

         <div class="left"><img src="./g.jpg"></div>

         <div class="right">

             <div>一篇工作总结</div>

             <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>

         </div>

     </li>

     <hr>

 </ul>

 <div id="more">加载更多...</div>

 <input type="hidden" id="last" value="0">

 </div>

 <script type="text/javascript">

     $(function(){

         $('#more').click(function(){

             var last = $('#last').val();

             var url = './data.php?last='+last+'&amount=2';

             queryComment(url);

         });

     });

     function queryComment(url){

         $.ajax({

             type : "get",

             async: true,

             url : url,

             dataType : "json",

             success : function(data){

                 if(data == 1){

                     $('#more').html('没有更多评论!').unbind('click');

                     return false;

                 }

                 $.each(data,function(i,element){

                     var nickname = element.nickname;

                     var content = element.content;

                     var time = element.time;

                     var imgpath = element.imgpath;

                     var info = $('<li class="comment"><div class="left"><img src="'+imgpath+'"></div><div class="right"><div>'+nickname+'</div><div></div>'+content+'</div></li><hr>');

                     $('#contentList').append(info);

                 });

                 var now = parseInt($('#last').val()) + 2;

                 $('#last').val(now);

             },

             error:function(){

                 console.log('fail');

             }

         });

     }

 </script>

 </body>

 </html>

AJAX动态加载评论的更多相关文章

  1. Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页

    1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  2. Ajax动态加载数据

    前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...

  3. 爬虫——爬取Ajax动态加载网页

    常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...

  4. 移动端，ajax 动态加载的元素，为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  5. AJAX 动态加载后台数据 绑定select

    <select id="select"> <!--下拉框数据动态加载--> </select> js:(使用jquery) $(document ...

  6. 关于使用scrapy框架编写爬虫以及Ajax动态加载问题、反爬问题解决方案

    Python爬虫总结 总的来说,Python爬虫所做的事情分为两个部分,1:将网页的内容全部抓取下来,2:对抓取到的内容和进行解析,得到我们需要的信息. 目前公认比较好用的爬虫框架为Scrapy,而且 ...

  7. echarts在.Net中使用实例(二) 使用ajax动态加载数据

    通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...

  8. ajax动态加载的图标

    http://www.ajaxload.info/ 这个网站可以动态生成ajax加载样式的小图片,git格式,挺不错推荐给大家

  9. zTree 树形控件 ajax动态加载数据

    很久没搞过树形控件了 , 再次接触看官网文档有点没懂,于是在网上找了个代码copy上,但数据是写死的,就想这在用ajax异步取出数据替换,下面是js代码 <SCRIPT type="t ...

随机推荐

  1. [BZOJ1559]密码

    数据范围特别小,考虑状压DP 因为要求给定的字符串在母串中出现,所以可以用AC自动机辅助DP 因为AC自动机不能处理模式串互相包含的情况,所以先把互相包含的串去掉(暴力就行,数据范围太小) 因为要状压 ...

  2. 【点分治】【哈希表】bzoj2599 [IOI2011]Race

    给nlog2n随便过的跪了,不得已弄了个哈希表伪装成nlogn(当然随便卡,好孩子不要学)…… 不过为啥哈希表的大小开小点就RE啊……?必须得超过数据范围一大截才行……谜 #include<cs ...

  3. python3 开发面试题（去重保持原来的顺序）6.2

    """ l1 = [11, 2, 3, 22, 2, 4, 11, 3] 去重并保持原来的顺序 """ #方式一 for 循环方法 l1 = ...

  4. Swift中的GCD——常见的dispatch方法

    什么是GCD Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法.该方法在Mac OS X 10.6雪豹中首次推出,并随后被引入到了iOS4.0中.GCD ...

  5. 如何移除inline-block元素之间的空白

    我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...

  6. javolution-core-java-6.1.0.jar 的使用

    官方网址:http://javolution.org/apidocs/javolution/io/Struct.html 第一步:导包 第二步:创建继承的结构体 结构体定义如下所示: public c ...

  7. LongPathException问题解析

    一.背景      当windows系统下使用System.IO命名空间下的方法,目录长度超过260个字符时,.net framework会抛出LongPathException.查阅相关资料,发现是 ...

  8. 如何让Ubuntu 14重启后，保存屏幕亮度的设置

    每次重新启动后,系统的屏幕亮度都会被调节到最大值,挺烦人的!如何让它保存设置值呢? 首先,我们必须知道自己系统的屏幕亮度取值范围,打开终端,按照下面的步骤进行: 进入backlight这个目录 cd ...

  9. redis秒杀系统数据同步（保证不多卖）

    东西不多卖 秒杀系统需要保证东西不多卖,关键是在多个客户端对库存进行减操作时,必须加锁.Redis中的Watch刚好可以实现一点.首先我们需要获取当前库存,只有库存中的食物小于购物车的数目才能对库存进 ...

  10. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...