国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热


News新聞

業(yè)界新聞動態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁      樂道系統(tǒng)FAQ      PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能詳解

PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能詳解

標簽： 發(fā)布日期：2017-05-04 00:00:00 276

本文實例講述了PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

index.php

<?php
require_once('connect.php'); //連接數(shù)據(jù)庫
$user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模擬了幾個用戶
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>滾屏加載--無刷新動態(tài)加載數(shù)據(jù)技術(shù)的應(yīng)用</title>
  <style type="text/css">
    #container{margin:10px auto;width: 660px; border: 1px solid #999;}
    .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}
    .author{position: absolute; left: 0px; font-weight:bold; color:#39f}
    .date{position: absolute; right: 0px; color:#999}
    .content{line-height:20px; word-break: break-all;}
    .element_head{width: 100%; position: relative; height: 20px;}
    .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}
  </style>
  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  //需要引入jquery
</head>
<body>
  <p class="one" style="margin:20px">提示：使用滾動或拉動滾動條向下看。</p>
  <div id="container">
    <?php
    $query=mysqli_query($link, "select * from say order by id desc limit 0,15");
    while ($row=mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    ?>
    <div class="single_item">
      <div class="element_head">
         <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>
         <div class="author"><?php echo $user[$row['userid']];?></div>
       </div>
       <div class="content"><?php echo $row['content'];?></div>
      </div>
    <?php } ?>
    </div>
  <div class="nodata"></div>
</body>
<script type="text/javascript">
$(function(){
  var winH = $(window).height(); //頁面可視區(qū)域高度
  var i = 1;//設(shè)置當前頁數(shù)
  $(window).scroll(function () {
    var pageH = $(document.body).height();
    var scrollT = $(window).scrollTop(); //滾動條top
    var aa = (pageH-winH-scrollT)/winH;
    if(aa<0.02){
      $.getJSON("result.php",{page:i},function(json){
        if(json){
          var str = "";
          $.each(json,function(index,array){
            var str = "<div class=\"single_item\"><div class=\"element_head\">";
            var str = str + "<div class=\"date\">"+array['date']+"</div>";
            var str = str + "<div class=\"author\">"+array['author']+"</div>";
            var str = str + "</div><div class=\"content\">"+array['content']+"</div></div>";
            $("#container").append(str);
          });
          i++;
        }else{
          $(".nodata").show().html("別滾動了，已經(jīng)到底了。。。");
          return false;
        }
      });
    }
  });
});
</script>
</html>