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

来源：互联网发布：php接口开发视频编辑：程序博客网时间：2024/06/07 12:17

案例demo02的目录结构：

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

接口文件 hot.php

[php] view plain copy
<?php   
    //排行榜接口数据  
    //1、获取数据 2、把我们获取到的数据组装成接口数据提供通信  
      
    require_once('../db.php');  
    $connect = Db::getInstance()->connect();  
    $sql = "SELECT * FROM hit AS a join news AS b ON a.news_id = b.id ORDER BY a.count DESC LIMIT 3";  
  
    $result = mysql_query($sql, $connect);  
    while($row = mysql_fetch_assoc($result)) {  
        $res[] = $row;  
    }  
    //print_r($res);  
    show(1, 'success', $res);  
  
    function show($code = 0, $message = 'error', $data = array()) {  
        $result = array(  
                'code' => $code,  
                'message' => $message,  
                'data' => $data  
            );  
        echo json_encode($result);  
    }  
?>  

联表查询数据库，并已json格式返回。

模板templates/singwa.php

[php] view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>新闻中心</title>  
    <link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">  
    <script src="public/js/jquery-1.7.min.js"></script>  
</head>  
<body>  
    <div class="container">  
        <div class="newslist">  
            <h3>新闻列表</h3>  
            <ul class="list-group">  
                <?php foreach ($news as $key => $value) { ?>  
                <li class="list-group-item"><a href="#"><?php echo $value['title'];?></a></li>  
                <?php } ?>  
            </ul>  
        </div>  
        <div class="hot-rank">  
            <h3>今日排行</h3>  
            <ul id="hot_html" class="list-group">  
                  
            </ul>  
        </div>  
    </div>  
    <script src="public/js/hot.js"></script>  
</body>  
</html>  

hot.js 发送Ajax请求，获取动态数据，动态显示数据。

[javascript] view plain copy
$.ajax({  
    url:'api/hot.php',  
    type: 'get',  
    dataType: 'json',  
    error: function() {  
        alert('请求错误');  
    },  
    success: function(result) {  
        if(result.code == 1) {  
            var html = '';  
            $.each(result.data, function(key, value) {  
                //console.log(key + ' ' + value.title);  
                html += '<li class="list-group-item"><a href="#">' + value.title + '</a></li>';  
            });  
            //console.log(html);  
            $("#hot_html").html(html);  
        } else {  
            alert('请求失败');  
        }  
    }  
});  

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

结果如下：

目录结构：

页面显示：

阅读全文

0 0