Auto refresh khi có bài viết mới với jquery ajax và php

Hôm nay mình viết bài hướng dẫn này giới thiệu với các bạn mới sữ dụng jquery kết hợp với php cách tự động cập nhật khi có bài viết mới mà không cần phải f5 lại trang.

với bài viết này các bạn có thể sử dụng kỉ thuật tương tự để làm ứng dụng chat nho nhỏ với phương pháp này :D

1 . Cấu trúc database 

2 . Html dùng để hiển thị dữ liệu được request từ ajax

 Webtricktips

3. Php

• db.php - Kết nối cơ sở dữ liệu

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'webtricktips');
define('TABLE_PREFIX', 'wtt_');
$db = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);
mysql_select_db(DB_DATABASE);
mysql_query("set names 'utf8'");
date_default_timezone_set('asia/ho_chi_minh');

• getmaxid.php : dùng để lấy p_id lớn nhất sữ dụng cho hàm autorefeshAjax() kiểm tra xem id hiện tại có lớn hơn id lưu ở hidden currentmaxid hay không. Nếu có thì hàm javascript autorefeshAjax() sẽ gọi hàm loadPost($maxid) và truyền và id lớn hơn

    include('db.php');
    $sql = 'SELECT max(p_id) FROM '.TABLE_PREFIX.'post LIMIT 1';
    $stmt = mysql_query($sql);
    $row = mysql_fetch_array($stmt);
    $maxid = $row[0];
    header("content-type: text/xml");
    echo ''
            . $maxid.'';

•  loadpost.php : mặc định sẽ trả về danh sách tất cả bài viết bài viết và maxid hiện tại danh sách bài viết đó. Nhưng khi có $_POST[‘maxid’] thì sẽ trả về danh sách tất cả các bài viết có id >= $_POST[‘maxid’] 

    include('db.php');
    $maxid = $_POST['maxid'];
    $sql = 'SELECT * FROM '.TABLE_PREFIX.'post';
    if ($maxid > 0) {
        $sql .= ' WHERE p_id >= '.$maxid;
    }
    $sql .= ' ORDER BY p_id DESC';
    $stmt = mysql_query($sql);
    $maxid = 0;

    $jsondata = array();
    while ($row = mysql_fetch_assoc($stmt)) {
        $jsondata['items'][] = array(
            'id' => $row['p_id'],
            'name' => $row['p_name'],
            'description' => $row['p_description'],
            'datecreated' => date('d/m/Y', $row['p_datecreated'])
        );
        if ($row['p_id'] > $jsondata['maxid'] || $jsondata['maxid'] == 0) {
            $jsondata['maxid'] = $row['p_id'];
        }
    }
    header('Content-Type: text/json');
    echo json_encode($jsondata);

4 . Javascript

• Document ready

 $(document).ready(function(){
  setTimeout("autorefeshAjax()", 5000);
  loadPost();
 });

• Function loadPost . lấy danh sách data bằng ajax

 function loadPost(maxid)
 {
  maxid = maxid || 0;

  var theUrl = 'http://localhost/tips/autorefeshcontent/loadpost.php';
  //Start Ajax request
  var data = '';
  if (maxid > 0) {
   data = 'maxid='+maxid;
   $('#content').prepend('

Loading...
')
  } else {
   $('#content').html('

Loading...
');
  }
  $.ajax({
      type: "POST",
      dataType: 'json',
      url: theUrl,
      data : data,
      error: function(){
       
      },
      success: function(json){
       if (json.items.length > 0) {
        var html ='';
        for (var i=0; i< json.items.length; i++) {
         var item = json.items[i];
         html += '

';
      html += '


'+item.name+'
'+item.datecreated+'';
      html += '


';
      html += item.description;
      html += '
';
      html += '
';
        }
        if (maxid > 0) {
         $('.loading').remove();
         $('#content').prepend(html);
        } else {
         $('#content').html(html);
        }
       }
       $('#currentmaxid').val(json.maxid);
      }
  });
 }

• Function autorefeshAjax() : lấy maxid mới so sánh với currentmaxid nên lớn hơn thì gọi hàm lostPost(maxid) để thêm dữ liệu mới vào danh sách dữ liệu đã có ngược lại thì không làm gì

 // Lay maxid de kiem tra voi currentmaxid hien tai
  function autorefeshAjax()
 {
  var theUrl = 'http://localhost/tips/autorefeshcontent/getmaxid.php';
  var currentMaxid = $('#currentmaxid').val();
  $.get( theUrl, function( data ) {
     var maxid = $(data).find('maxid').text();
     if (maxid > currentMaxid) {
      loadPost(maxid);
     }
     setTimeout("autorefeshAjax()", 5000);
  });
 }

Như vậy là đã hoàn thành xg tư động lấy dữ liệu mới với jquery và php Lần đầu tiên viết bài chia sẽ khi câu chữ cùi bắp quá chắc xem cũng khó hiểu - các bạn có thể download project bằng link bên dưới. Mong rằng bài viết hữu ích với các bạn.

Link : http://www.mediafire.com/download/nv1yzgcuu96y9t6/autorefeshcontent.zip