使用ajax实现页面部分静态化

   案例demo02的目录结构:

使用ajax实现页面部分静态化_第1张图片

       为实现局部静态化,需要结合Ajax技术(就是访问页面时同时自动执行ajax函数访问后台获取数据,并将数据填充页面)。当访问主页index.php时,根据静态页面的缓存时效,判断是否生成index.shtml静态页面,当静态页面返回后静态页面中的js发起Ajax请求,获取服务器中的数据,进行动态更新。那么这里就需要一个 服务器文件 接口,响应Ajax请求。

       接口文件 hot.php

[php]  view plain  copy
  1.     //排行榜接口数据  
  2.     //1、获取数据 2、把我们获取到的数据组装成接口数据提供通信  
  3.       
  4.     require_once('../db.php');  
  5.     $connect = Db::getInstance()->connect();  
  6.     $sql = "SELECT * FROM hit AS a join news AS b ON a.news_id = b.id ORDER BY a.count DESC LIMIT 3";  
  7.   
  8.     $result = mysql_query($sql$connect);  
  9.     while($row = mysql_fetch_assoc($result)) {  
  10.         $res[] = $row;  
  11.     }  
  12.     //print_r($res);  
  13.     show(1, 'success'$res);  
  14.   
  15.     function show($code = 0, $message = 'error'$data = array()) {  
  16.         $result = array(  
  17.                 'code' => $code,  
  18.                 'message' => $message,  
  19.                 'data' => $data  
  20.             );  
  21.         echo json_encode($result);  
  22.     }  
  23. ?>  
       联表查询数据库,并已json格式返回。

       模板templates/singwa.php

[php]  view plain  copy
  1.   
  2. "en">  
  3.   
  4.     "UTF-8">  
  5.     新闻中心  
  6.     "stylesheet" href="public/css/bootstrap.min.css" type="text/css">  
  7.     "public/js/jquery-1.7.min.js">  
  8.   
  9.   
  10.     class="container">  
  11.         class="newslist">  
  12.             

    新闻列表

      
  13.             class="list-group">  
  14.                 foreach ($news as $key => $value) { ?>  
  15.                 class="list-group-item">"#">echo $value['title'];?>
  16.   
  17.                   
  18.               
  19.         
  
  •         class="hot-rank">  
  •             

    今日排行

      
  •             "hot_html" class="list-group">  
  •                   
  •               
  •         
  •   
  •     
  •   
  •     "public/js/hot.js">  
  •   
  •   
  •        hot.js 发送Ajax请求,获取动态数据,动态显示数据。

    [javascript]  view plain  copy
    1. $.ajax({  
    2.     url:'api/hot.php',  
    3.     type: 'get',  
    4.     dataType: 'json',  
    5.     error: function() {  
    6.         alert('请求错误');  
    7.     },  
    8.     success: function(result) {  
    9.         if(result.code == 1) {  
    10.             var html = '';  
    11.             $.each(result.data, function(key, value) {  
    12.                 //console.log(key + ' ' + value.title);  
    13.                 html += '' + value.title + '
    14. ';  
    15.             });  
    16.             //console.log(html);  
    17.             $("#hot_html").html(html);  
    18.         } else {  
    19.             alert('请求失败');  
    20.         }  
    21.     }  
    22. });  

           当第一次访问 index.php (index.php文件不做修改,与上文一致),服务器会根据模板singwa.php生成对应的静态文件index.shtml,将index.shtml文件发回客户端。客户端得到index.shtml文件后,又一次向服务器发送Ajax请求获取动态数据,并进行显示。

           结果如下:

    目录结构:

    使用ajax实现页面部分静态化_第2张图片

    页面显示:

    使用ajax实现页面部分静态化_第3张图片


    你可能感兴趣的:(页面静态化)