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>

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. Problem M: 输出九九乘法表

    #include<stdio.h> int main() { int n,i,j; scanf("%d",&n); n>=&&n<= ...

  2. Error:Execution failed for task ‘:app:processDebugManifest’.

    Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed : Attribute ...

  3. Node.js的集群功能以及在Express的配置

    Node.js在v0.6.0版本下内置了集群功能,作为cluster模块,用于nodejs的多核处理,也比较容易通过脚本实现一个负载均衡的集群. 脚本参考了其他人的材料,建立一个server.js(因 ...

  4. Coherence代理的负载均衡

    Coherence在extend模式下,proxy的负载均衡机制官方解释是 Extend client connections are load balanced across proxy servi ...

  5. Go测试,功能测试,性能测试,测试辅助,go test 工具,高级测试,IO相关测试,黑盒测试,HTTP测试,进程测试

    go命令教程: http://wiki.jikexueyuan.com/project/go-command-tutorial/0.5.html Go测试 第一个测试 “Hello Test!” 首先 ...

  6. shell--管道命令（pipe）

    管道命令使用的是“|”这个界定符号 管道命令“|”仅能处理经由前面一个命令传来的正确信息,也就是standard output的信息,对于standard error并没有直接处理的能力 每个管道后面 ...

  7. D3.js系列——布局：打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  8. requireJS简介和一个完整实例

    什么是 requireJS ? requireJS 是用JavaScript编写的JS框架,主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作,可简单理解为JS文件的加载 ...

  9. python 推导式(Comprehensions)

    一.介绍 列表推导(list comprehensions) 这是一种将for循环.if表达式以及赋值语句放到单一语句中的一种方法.换句话说,你能够通过一个表达式对一个列表做映射或过滤操作. 一个列表 ...

  10. What is Continuous Integration?

    什么叫持续集成? 原文: https://docs.microsoft.com/en-us/azure/devops/what-is-continuous-integration ---------- ...