十
3
2

[原创]基于jQuery的AJAX 之四 文章列表例子（PHP）

Author Jessica     Category JavaScript, PHP, 本站原创     Tags , ,

 

对于一般有些基础的人，可以说前几次课就等于是废话>_<不要骂我等你们看完了才说这话…但是这次课程就不一样了，我们进入了真正的网站开发，没关系不要怕，其实也非常简单。我们这次的任务就是要做一个基于JQuery AJAX的PHP文章列表的例子。效果就象我的网站，你可以先感受一下。(http://Www.Skiyo.Cn/)                                               
 
效果是不是非常web2.0？接下来我们的任务就是一步一步完成它。
 
我们首先来写一个PHP的文章列表，由于我们课程主要不在此，所以我只把代码贴下。

    

  1. <?php  
    2. 

  2. header("Content-type: text/html;charset=GB2312");//输出编码,避免中文乱码  
    3. 

  3. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");  
    4. 

  4. header("Cache-Control: no-cache, must-revalidate");  //AJAX和缓存是死对头  
    5. 

  5. header("Pragma: no-cache");  
    6. 

  6. include "conn.php";  
    7. 

  7. require "function.php";  
    8. 

  8. $page=$_GET['page'];  
    9. 

  9. if (isset($page)) {  
    10. 

  10.     settype($page,"integer");  
    11. 

  11.     $pagesize=15;//每页显示条数  
    12. 

  12.     $page ? ($limt=($page-1)*$pagesize) : $page=1;  
    13. 

  13.     $count_result=mysql_query("select count(id) as count from tankme_article where kind='$kind'");  
    14. 

  14.     $max=@mysql_fetch_array($count_result);  
    15. 

  15.     $count=$max["count"];//统计记录条数  
    16. 

  16.     $max_page=($count%$pagesize==0)? ($count/$pagesize):intval(($count/$pagesize+1));  
    17. 

  17.     $max_page=intval($max_page);//强制类型转换  
    18. 

  18.     $result=mysql_query("select * from tankme_article order by id DESC LIMIT $limt,$pagesize");  
    19. 

  19.     while($myrow=@mysql_fetch_array($result)){  
    20. 

  20.         $id=$myrow["id"];  
    21. 

  21.         $id_count_result=mysql_query("select count(id) as id_count from tankme_contact where tankme_id=$id");  
    22. 

  22.         $id_count_array=@mysql_fetch_array($id_count_result);  
    23. 

  23.         $id_count=$id_count_array["id_count"];  
    24. 

  24.         $title=$myrow["title"];  
    25. 

  25.         $value=$myrow["value"];  
    26. 

  26.         $time=$myrow["time"];  
    27. 

  27.         $time=date("Y-m-d H:i:s",$time);  
    28. 

  28.         $click=$myrow["click"];  
    29. 

  29.         $total_votes=$myrow["total_votes"];  
    30. 

  30.         $total_value=$myrow["total_value"];  
    31. 

  31.         echo $title." ".$value." ".$time." ".$click."<hr>";  //输出文章列表  
    32. 

  32.     }  
    33. 

  33.     echo ajaxpage($max_page,$page,$pagesize,"ajaxarticle.php?kind=$kind");  //分页标签（下面提供）  
    34. 

  34. } else {  
    35. 

  35.     echo "<script language='javascript'>alert('非法请求！！');</script>";  
    36. 

  36.     echo "<script language='javascript'>location.href='index.php';</script>";  
    37. 

  37. }  
    38. 

  38.  
    39. 

  39. ?>  
    40.
上面的那个分页标签函数

 

    

  1. function ajaxpage($page_num,$cur_page,$per_group,$base_url){  //分页函数  
    2. 

  2.  
    3. 

  3.     $base_url .= strpos($base_url, '?') ? '&' : '?';  
    4. 

  4.  
    5. 

  5.     $page_val = "";  
    6. 

  6.  
    7. 

  7.     if ($page_num < 1) {  
    8. 

  8.         return $page_val;  
    9. 

  9.     } elseif($page_num == 1) {  
    10. 

  10.         return $page_val = 1;  
    11. 

  11.     }  
    12. 

  12.  
    13. 

  13.     $group_ok = !(($page_num-1)%($per_group-1));  
    14. 

  14.  
    15. 

  15.     //计算一共有多少组  
    16. 

  16.     if($group_ok) {  
    17. 

  17.         $group_num = ($page_num-1)/($per_group-1);  
    18. 

  18.     } else {  
    19. 

  19.         $group_num = ceil(($page_num-1)/($per_group-1));  
    20. 

  20.     }  
    21. 

  21.  
    22. 

  22.     //判断当前页是否为一组的最后一个  
    23. 

  23.     $is_last_page = !(($cur_page-1)%($per_group-1));  
    24. 

  24.  
    25. 

  25.     //计算当前在的组数  
    26. 

  26.     if($is_last_page) {  
    27. 

  27.         $cur_group = ($cur_page-1)/($per_group-1) + 1;  
    28. 

  28.     } else {  
    29. 

  29.         $cur_group = ceil(($cur_page-1)/($per_group-1));  
    30. 

  30.     }  
    31. 

  31.  
    32. 

  32.     //计算显示的起始页  
    33. 

  33.     $from = ($cur_group - 1) * ($per_group-1) + 1;  
    34. 

  34.     $from = $cur_group <= 1 ? 1 :$from;  
    35. 

  35.     $to = $from + $per_group;  
    36. 

  36.     $to = $to > $page_num ? $page_num + 1 : $to;  
    37. 

  37.  
    38. 

  38.     for($a = $from; $a < $to; $a++){  
    39. 

  39.         if( $a != $cur_page) {  
    40. 

  40.             $page_val .= '<a href =javascript:dopage(\''.$base_url.'page='.$a.'\');>'.$a.'</a>';  
    41. 

  41.         } else {  
    42. 

  42.             $page_val .= '<span class="current">'.$a.'</span>';  
    43. 

  43.         }  
    44. 

  44.     }  
    45. 

  45.     //上一页下一页首页尾页  
    46. 

  46.     $next=$cur_page+1;  
    47. 

  47.     $prev=$cur_page-1;  
    48. 

  48.     if ($cur_page!=$page_num) {  
    49. 

  49.         $page_val.='<a href =javascript:dopage(\''.$base_url.'page='.$next.'\');>Next</a>';  
    50. 

  50.         $page_val .= '<a href =javascript:dopage(\''.$base_url.'page='.$page_num.'\');>'.'>>'.'</a>'; //尾页  
    51. 

  51.     }  
    52. 

  52.     if ($cur_page!=1) {  
    53. 

  53.         $page_val = '<a href =javascript:dopage(\''.$base_url.'page='.$prev.'\');>Prev</a>'.$page_val;  
    54. 

  54.         $page_val = '<a href =javascript:dopage(\''.$base_url.'page=1\');>'.'<<'.'</a>'.$page_val;  //首页  
    55. 

  55.     }  
    56. 

  56.  
    57. 

  57.     return $page_val;  
    58. 

  58. }  
    59.

如果大家能看懂更好，看不懂我也没办法，努力学好一门语言吧。是什么都无所谓，上面没有设计任何有关AJAX的东西，就是个输出文章列表，非常简单。

这个文件我们暂且叫ajaxarticle.php
还记得上次课程吗？就相当于容器里面的那个页面（2.html），只不过现在改成动态的而已。
好了，现在我们开始写主页面。

 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

  3.     <head> 
    4. 

  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 

  5.         <title>- Tank Me - by Jessica</title> 
    6. 

  6.         <meta name="robots" content="all" /> 
    7. 

  7.         <meta name="author" content="jessica.dlq@gmail.com,Jessica" /> 
    8. 

  8.         <meta name="Copyright" content="Jessica CopyRight 2008" /> 
    9. 

  9.         <meta name="keywords" 
    10. 

  10.             content="TankMe,Tank Me,Tank,MeJessica,Blog,Jessicas,designing,with,web,作品,个人作品,css,graphic,design,layout,usability,accessibility,w3c,w3,w3cn" /> 
    11. 

  11.         <meta name="description" content="- Tank Me -" /> 
    12. 

  12.         <script type="text/javascript" src="js/jquery.js"></script> 
    13. 

  13.         <link rel="stylesheet" href="css/bg.css" type="text/css" /> 
    14. 

  14.         <link rel="stylesheet" href="css/article.css" type="text/css" /> 
    15. 

  15.         <link rel="stylesheet" href="css/LoadingStatus.css" type="text/css" /> 
    16. 

  16.         <title>无标题文档</title> 
    17. 

  17.         <script type="text/javascript" src="js/jquery.js"></script>      
    18. 

  18.         <script LANGUAGE="JavaScript">      
    19. 

  19.         <!--  
    20. 

  20.         //上节课的函数你还记得吗？  
    21. 

  21.         $(function (){ //$(document).ready(function (){ 的简写  
    22. 

  22.             dopage('ajaxarticle.php?page=1');//第一次打开页面时显示第一页内容  
    23. 

  23.         });  
    24. 

  24.         function dopage(ajaxurl){  
    25. 

  25.             $('#LoadingStatus').show();  
    26. 

  26.             $.ajax({url: ajaxurl,  
    27. 

  27.             type: 'GET',  
    28. 

  28.             dataType: 'html',  
    29. 

  29.             timeout: 20000,  
    30. 

  30.             error: function(){alert('error');$('#LoadingStatus').hide(500);  
    31. 

  31.             },  
    32. 

  32.             success: function(html){  
    33. 

  33.                 window.location="#article_md";  
    34. 

  34.                 $('#LoadingStatus').hide(500);  
    35. 

  35.                 $('#article').html(html);  
    36. 

  36.             }  
    37. 

  37.             });  
    38. 

  38.         }  
    39. 

  39.         //--> 
    40. 

  40.         </script>   
    41. 

  41.     </head> 
    42. 

  42.  
    43. 

  43. <body> 
    44. 

  44.     <div id="top"><img src="images/top.png" width="750" height="180" /></div> 
    45. 

  45. <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    46. 

  46.             <tr> 
    47. 

  47.                 <td align="center"> 
    48. 

  48.                     <a name="article_md" id="article_md"></a> 
    49. 

  49. <!-- 我们在这里设置一个锚点连接的原因是：由于文章列表可能会非常的长，这样我们就得把滚动栏拖到很下面，点〈下一页〉后，由于是AJAX的，所以用户看到的是下一页的后面的文章列表（我不知道怎么样说的更明白了，大家可以去掉试下-_-！）我们为了让用户点完下一页回到顶端，也就是第二页的文章列表开始，所以要设置这个东西--> 
    50. 

  50. <img src="images/hr.png" width="750" height="5" /> 
    51. 

  51.                   <br /> 
    52. 

  52.                     <div id="LoadingStatus"><img src="images/ajax-loader.gif"/></div> <!-- 等待层-->    
    53. 

  53.                     <table width="750" border="0" cellpadding="0" cellspacing="0"> 
    54. 

  54.                         <tr> 
    55. 

  55.                             <td align="center"> 
    56. 

  56.                             <div id="article">    
    57. 

  57.                             <!--显示文章列表层--> 
    58. 

  58.                             </div> 
    59. 

  59.                             冀ICP备07500313号 Code by <b>Jessica</b>. Copyright &copy; 2008-2009 <b>Jessica</b> All rights reserved.   
    60. 

  60.                             </td> 
    61. 

  61.                         </tr> 
    62. 

  62.                     </table> 
    63. 

  63.                 </td> 
    64. 

  64.   </tr> 
    65. 

  65. </table> 
    66. 

  66. 如果不刷新这里的数字是不变的喔<?=rand(0, 999)?> 
    67. 

  67.     </body> 
    68. 

  68. </html> 
    69.

 

OK了。你现在可以运行一下了，注意因为使用了数据库。你需要有个表，关于数据库连接的我都没有写，你可以自己完成。
现在你可以把这个小网页搭建起来了，运行一下，看看是不是很AJAX呢？？
 
在下节课中，我们还要更深一层，写一个AJAX的留言板，下节课的内容很重要喔！！别迟到喔！！

2 Comments to “ [原创]基于jQuery的AJAX 之四 文章列表例子（PHP） ”

  • 游客 2008年11月6日 于 17:08

    收藏了，可能用得著

    回复
  • deleteme 2008年12月3日 于 22:47

    deleteme

    回复

Post comment

分类目录

最近文章

近期评论

文章归档

标签

.net AJAX button Comet CSS Discuz! DIV+CSS Flash Form Google HTML编辑器 IE8 Java JavaScript jQuery JSP md5 MySQLReback OAuth Oracle PHP php-fpm PNG Punny SkiyoTabs tab TagCloud Vista Web2.0 Windows7 上传 加密 图标 本站原创 模板 模板引擎 源码 登录 短网址 石家庄 算法 类 编译 面向对象 魔术方法

链接表