您的位置: 首页  >  文章  >  使用ajax实现页面部分静态化

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

分类: 文章 • 2024-08-01 22:36:16

   案例demo02的目录结构：

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

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

       接口文件 hot.php

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

       模板templates/singwa.php

[php] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>新闻中心</title>  
  6.     <link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">  
  7.     <script src="public/js/jquery-1.7.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <div class="container">  
  11.         <div class="newslist">  
  12.             <h3>新闻列表</h3>  
  13.             <ul class="list-group">  
  14.                 <?php foreach ($news as $key => $value) { ?>  
  15.                 <li class="list-group-item"><a href="#"><?php echo $value['title'];?></a></li>  
  16.                 <?php } ?>  
  17.             </ul>  
  18.         </div>  
  19.         <div class="hot-rank">  
  20.             <h3>今日排行</h3>  
  21.             <ul id="hot_html" class="list-group">  
  22.                   
  23.             </ul>  
  24.         </div>  
  25.     </div>  
  26.     <script src="public/js/hot.js"></script>  
  27. </body>  
  28. </html>  
       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 += '<li class="list-group-item"><a href="#">' + value.title + '</a></li>';  
  14.             });  
  15.             //console.log(html);  
  16.             $("#hot_html").html(html);  
  17.         } else {  
  18.             alert('请求失败');  
  19.         }  
  20.     }  
  21. });  

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

       结果如下：

目录结构：

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

页面显示：

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


相关推荐