PHP ajax implements dynamic data loading technology without refreshing, phpajax_PHP tutorial

php ajax implements dynamic data loading technology without refreshing, phpajax

When we browse some web pages, when the scroll bar of the browser is pulled to the bottom of the page, the page will continue to automatically Load more content for users to browse. Let me call this technology scroll loading technology. We found that many websites use this technology. Bing image search, Sina Weibo, QQ Zone, etc. have fully applied this technology.

Scroll loading technology uses Javascript to monitor the position of the scroll bar. Every time the scroll bar reaches the bottom of the browser window, an Ajax request is triggered to the background PHP program, the corresponding data is returned, and the returned data is appended to the bottom of the page. , thus realizing dynamic loading, which is actually a typical Ajax application. This article will use jQuery, combined with PHP, mysql and JSON, to explain how to apply scroll loading technology to your project. Of course, the prerequisite for reading this article is that you need to have a basic knowledge of jQuery and PHP.

index.php

We want to display 15 pieces of data by default, so we first fetch the first 15 pieces of data from the database and display them on the page. We will also display the newly loaded data in 15 pieces at a time.

In order to explain as briefly as possible, I use native PHP and mysql query statements. First, you need to connect to the database, including connect.php with connection information. Here I define several user IDs.

Then query the data table, obtain the result set, and output it in a loop. The code is as follows:

<&#63;php 
require_once('connect.php'); 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
&#63;> 
<div id="container"> 
  <&#63;php 
  $query=mysql_query("select * from say order by id desc limit 0,15"); 
  while ($row=mysql_fetch_array($query)) { 
  &#63;> 
  <div class="single_item"> 
    <div class="element_head"> 
       <div class="date"><&#63;php echo date('m-d H:i',$row['addtime']);&#63;></div> 
       <div class="author"><&#63;php echo $user[$row['userid']];&#63;></div> 
     </div> 
     <div class="content"><&#63;php echo $row['content'];&#63;></div> 
  </div> 
  <&#63;php } &#63;> 
 </div> 
<div class="nodata"></div> 

Note: The data used in this example comes from the article on this site: There is an introduction to creating a data table in the article.

jQuery

1. First, we need to get the height of the browser’s visible area page:

Copy code The code is as follows: var winH = $(window).height();

2. Then, what needs to be done when scrolling the page is: calculate the total height of the page (when scrolling to the bottom, the page loads new data, so the total page height changes dynamically), calculate the scroll bar position (scroll bar The position also changes dynamically with the height of the loaded page), and then constructs a formula to calculate the relative proportion.

$(window).scroll(function () { 
  var pageH = $(document.body).height(); //页面总高度 
  var scrollT = $(window).scrollTop(); //滚动条top 
  var aa = (pageH-winH-scrollT)/winH; 
}); 

3. When the scroll bar is close to the bottom of the page, ajax loading is triggered. In this example, we use jQuery's getJSON method to send a request to the server result.php. The request parameter is page, which is the number of pages.

if(aa<0.02){ 
  $.getJSON("result.php",{page:i},function(json){ 
    ..... 
  }); 
 } 

4. If the request response successfully returns JSON data, parse the JSON data and append the data to the page DIV#container. If no JSON data is returned, it means that all the data has been displayed

if(json){ 
  var str = ""; 
  $.each(json,function(index,array){ //遍历 
    var str = "..."; //获取的JSON数据 
    $("#container").append(str); //追加 
  }); 
  i++; //页数+1 
}else{ 
  $(".nodata").show().html("别滚动了，已经到底了。。。"); 
  return false; 
} 

The complete jQuery code is as follows:

$(function(){ 
  var winH = $(window).height(); //页面可视区域高度 
  var i = 1; //设置当前页数 
  $(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 += "<div class=\"date\">"+array['date']+"</div>"; 
            var str += "<div class=\"author\">"+array['author']+"</div>"; 
            var str += "</div><div class=\"content\">"+array['content']+"</div></div>"; 
            $("#container").append(str); 
          }); 
          i++; 
        }else{ 
          $(".nodata").show().html("别滚动了，已经到底了。。。"); 
          return false; 
        } 
      }); 
    } 
  }); 
}); 

result.php

When scrolling to the bottom of the page, the front-end Ajax request is to result.php. The background program will query the corresponding records in the data table according to the requested data page number: page, and return the record set output in json format to Front-end processing.

require_once('connect.php'); //连接数据库 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$page = intval($_GET['page']); //获取请求的页数 
$start = $page*15; 
$query=mysql_query("select * from say order by id desc limit $start,15"); 
while ($row=mysql_fetch_array($query)) { 
  $arr[] = array( 
    'content'=>$row['content'], 
    'author'=>$user[$row['userid']], 
    'date'=>date('m-d H:i',$row['addtime']) 
  ); 
} 
echo json_encode($arr); //转换为json数据输出 

Okay, the introduction of this article ends here, go and see the effect.

The above is the entire content of this article, I hope you all like it.

http://www.bkjia.com/PHPjc/991804.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/991804.htmlTechArticlephp ajax implements no-refresh dynamic data loading technology, phpajax When we browse some web pages, when we scroll the browser When the bar reaches the bottom of the page, the page will continue to automatically load more content for...