PHP||对json数据二次处理

梦里梦外; 2023-03-13 03:13 9阅读 0赞

## 前言 ##

1）之前向PHP发送请求，拿到的数据都是直接返回浏览器，没有在服务器端（PHP页面）进行二次处理。本文主要就是以实例的形式，记录一下关于在PHP页面对json数据二次处理的内容。  
2）案例实现功能：页面初始化后有两个按钮，点击分别给添加一个item和多个item。其中每个item的框架如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 准备数据 ##

因为没有实际的数据，所以采用假数据来测试（数据来自落网）【myjson.php】

[
        { 
            "path" : "imgs/432131.jpg",
            "name" : "vol.574 暂时忘光所有的未来",
            "like" : 2763
        },
        { 
            "path" : "imgs/22347432.jpg",
            "name" : "vol.648 梦想家",
            "like" : 3211
        },
        { 
            "path" : "imgs/23438654.jpg",
            "name" : "vol.510 Christmas Eve",
            "like" : 319
        },
        { 
            "path" : "imgs/123251241.jpg",
            "name" : "vol.242 昂然生长",
            "like" : 4441
        },
        { 
            "path" : "imgs/132547211.jpg",
            "name" : "vol.131 这一些，哪一些。",
            "like" : 3099
        },
        { 
            "path" : "imgs/213423821.jpg",
            "name" : "vol.168 Forever",
            "like" : 6666
        },
        { 
            "path" : "imgs/342356787.jpg",
            "name" : "vol.90 Your Whisper",
            "like" : 980
        },
        { 
            "path" : "imgs/821435436.jpg",
            "name" : "vol.101 为了青春的歌",
            "like" : 4811
        },
        { 
            "path" : "imgs/876543221.jpg",
            "name" : "vol.69 眺望的尽头",
            "like" : 3779
        },
        { 
            "path" : "imgs/1326457690.jpg",
            "name" : "vol.1 散漫的夏天",
            "like" : 1481
        },
        { 
            "path" : "imgs/87549342213.jpg",
            "name" : "vol.5 A New Beginning",
            "like" : 3099
        },
        { 
            "path" : "imgs/cover.jpg",
            "name" : "vol.140 向西 向西",
            "like" : 6164
        },
        { 
            "path" : "imgs/covergddaewe.jpg",
            "name" : "vol.462 让风吹",
            "like" : 983
        },
        { 
            "path" : "imgs/fefwerg.jpg",
            "name" : "vol.286 咫尺，天涯。",
            "like" : 4811
        },
        { 
            "path" : "imgs/regret.jpg",
            "name" : "vol.765 不知所向",
            "like" : 679
        }
    ]

## 服务器端 ##

**1 加载一个item**  
每次根据浏览器端发过来的index值，先判断是否还有数据未加载，如果是，则对获取的json数据进行二次处理，然后将相应的数据打包成新的json数据作为响应主体返回浏览器。  
1)json\_decode(参数1，参数2);  
该函数将json数据转化成数组/对象。其中参数1为要转换的数据；参数2为布尔值（false则转化成对象，true则转化成数组），不填时默认是false。  
2）json\_encode(参数1);  
该函数将数组/对象数据转化成json数据。参数1为要转换的数据。  
【addOne.php】

<?php
    
        //totle总量 success是否成功获取数据（1/0） index成功获取后的页面数据值 item本次获取的当前数据
    
        //声明返回的是json 
        header('content-type:application/json; charset=utf-8');
        
        $index = $_GET["index"];
    
        $datefile = file_get_contents('mydate.json');
    
        $date = json_decode($datefile, true);
    
        if($index < count($date)){ 
            $sec = 1;
    
        }else{ 
            $sec = 0;
    
        }
    
        echo '{';
        echo '"success" : '.$sec;
        echo ',"index" : '.($index+1);
        echo ',"totle" : '.count($date);
        echo ',"item" : '.json_encode($date[$index]);
        echo '}';
    ?>

**2 加载多个item**  
原理实际上同上。  
每次根据浏览器端发过来的index值，先判断是否还有数据未加载，如果是，则对获取的json数据进行二次处理，然后将相应的数据打包成新的json数据作为响应主体返回浏览器。  
【addMore.php】

<?php
    
        //totle总量 success是否成功获取数据（1/0） index成功获取后的页面数据值 items本次获取的多个数据 sjs本次随机添加数据数量
    
        //声明返回的是json 
        header('content-type:application/json; charset=utf-8');
        
        $index = $_GET["index"];
    
        $datefile = file_get_contents('mydate.json');
    
        $date = json_decode($datefile, true);
    
        $sjs = 0;
        if($index < count($date)){ 
            $sec = 1;
            $sjs = rand(1,6);
            if(($index + $sjs) >= count($date)){ 
                $sjs = 1;
            }
            
        }else{ 
            $sec = 0;
        }
    
        echo '{';
        echo '"success" : '.$sec;
        echo ',"index" : '.($index+$sjs);
        echo ',"totle" : '.count($date);
        echo ',"sjs" : '.$sjs;
        echo ',"items" : [';
        for($i = 0;$i < $sjs; $i++){ 
            echo json_encode($date[$index+$i]);
            if($i != $sjs-1){ 
                echo ',';
            }
        }
        echo ']}';
    ?>

## 浏览器端 ##

**1 模板引擎**  
模板引擎是为了使用户界面与业务数据分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。  
简单地说,模板引擎的作用就是取得数据并加以处理,最后显示出数据。  
本次的模板引擎我是在GitHub下载的，这是链接：https://aui.github.io/art-template/zh-cn/docs/installation.html  
下载完毕直接拖到本项目目录下即可。【template-web.js】

代码就不放了，按需自行下载吧

**2 请求接口**  
为了避免以后每次向服务器发送Ajax请求，都写一次类似的代码，我直接将请求函数进行封装，以便后期使用。封装的函数代码如下【ajax.js】：

/* * 属性值： * date url type succuss * 请求主体 请求网址 请求类型 回调函数 */
    
     function getPostUp(object){ 
        var xhr = new XMLHttpRequest();
         
        if(object.type == "get" && object.date){ 
            object.url = object.url + "?" + object.date;
    
         }
    
         xhr.open(object.type, object.url);
    
         if(object.type == "post" && object.date){ 
             xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    
         }
    
        xhr.onreadystatechange = function(){ 
            if(xhr.readyState == 4 && xhr.status == 200){ 
                
                var type = xhr.getResponseHeader('content-type');
                if(type.indexOf("json") != -1){ 
                    object.succuss(JSON.parse(xhr.responseText));
                }else if(type.indexOf("xml") != -1){ 
                    object.succuss(xhr.responseXML);
                }else{ 
                    object.succuss(xhr.responseText);
                }
            }
        }
        xhr.send(object.date);
     }

**3 浏览器页面**  
步骤：  
1） html页面布局  
2） css添加样式  
3）引入模板引擎  
4）引入Ajax请求接口函数  
5）给按钮添加点击事件  
6）将返回的数据提取并包装后用template()函数将其填入模板  
7）将填好的模板显示在浏览器页面  
【index.html】

<!DOCTYPE html>
    <html>
        <head>
            <title>模板引擎实例</title>
            <meta charset="utf-8" />
            <style type="text/css">
                *{ 
                    padding: 0;
                    margin: 0;
                }
                #itembox{ 
                    margin-top: 20px;
                    margin-left: 20px;
                    width: 450px;
                    height: 330px;
                    background-color: #e6e6e6;
                }
                #top img{ 
                    width: 100%;
                    height: 300px;
                }
                #bottom{ 
                    width: 100%;
                    height: 30px;
                }
                #bottom h4{ 
                    padding-left: 8px;
                    color: #515151;
                    line-height: 26px;
                }
                #bottom img{ 
                    float: right;
                    margin-right: 40px;
                    margin-top: -24px;
                    width: 20px;
                    height: 20px;
    
                }
                #bottom p{ 
                    float:right;
                    margin-top: -28px;
                    margin-right: 8px;
                    color: #515151;
                    font-size: 10px;
                    line-height: 26px;
                }
                a{ 
                    cursor: pointer;
                }
                a:hover{ 
                    color: #d81e06;
                }
            </style>
        </head>
        <body>
            <div>
                <button id="one">点我加一个</button>
                <button id="some">点我加一批</button>
            </div>
            <div id="bigbox">
                
                
            </div>
        </body>
    </html>
    
    <script src="ajax.js"></script>
    <script src="template-web.js"></script>
    
    <script type="text/html" id="test">
        <div id="itembox">
            <div id="top">
                <img src= { { path}} />
            </div>
            <div id="bottom">
                <h4><a>{ { name}}</a></h4>
                <img src="./imgs/like.png" />
                <p>{ { like}}</p>
            </div>
            
        </div>
    </script>
    
    <script type="text/javascript">
        var temp = 0;
        var bigbox = document.getElementById("bigbox");
        document.getElementById("one").onclick = function(){ 
            getPostUp({ 
                date:"index="+ temp,
                url:"./date/addOne.php",
                type:"get",
                succuss:function(d){ 
                     
                    if(d.success == 1){ 
                        temp = d.index;
                        var mydate = { 
                            path : d.item.path,
                            name : d.item.name,
                            like : d.item.like
                        }
                        var res = template("test", mydate);
                        // console.log(res);
                        bigbox.innerHTML += res;
    
    
                    }else{ 
                        alert("数据已加载完毕！！");
                    }
    
                }
            });
        }
    
        document.getElementById("some").onclick = function(){ 
            getPostUp({ 
                date:"index="+ temp,
                url:"./date/addMore.php",
                type:"get",
                succuss:function(d){ 
                    console.log(d);
                    if(d.success == 1){  
                        for(var i = 0; i < d.sjs; i++){ 
                            temp = d.index;
                            var mydate = { 
                                path : d.items[i].path,
                                name : d.items[i].name,
                                like : d.items[i].like
                            }
                            var res = template("test", mydate);
                            // console.log(res);
                            bigbox.innerHTML += res;
                        }
    
                    }else{ 
                        alert("数据已加载完毕！！");
                    }
    
                }
            });
        }
    </script>

## 测试 ##

**加载一个：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]  
**加载多个（1-6）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]  
**数据加载完毕时**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/43f01d564a2346f48d933120582adce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/3a433a3749704fff91dbd8c5c58e2c81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: /images/20230312/16f27607a9e54b52bfe7cbb75459fcc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]: /images/20230312/435de0f0be1a4fa396f81865c12a0d4b.png