PHP||对json数据二次处理

最新推荐文章于 2022-01-11 20:45:28 发布

月亮不休我不眠

最新推荐文章于 2022-01-11 20:45:28 发布

阅读量645

点赞数

分类专栏： WEB 文章标签： ajax js php web

本文链接：https://blog.csdn.net/qq_43543920/article/details/106033248

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前言

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

准备数据

因为没有实际的数据，所以采用假数据来测试（数据来自落网）【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 id="itembox">
                <div id="top">
                    <img src="imgs/123251241.jpg" />
                </div>
                <div id="bottom">
                    <h4><a>V12 下次不会</a></h4>
                    <img src="./imgs/like.png" />
                    <p>1234</p>
                </div>
            </div> -->
        </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>

测试

加载一个：
在这里插入图片描述
加载多个（1-6）

数据加载完毕时

月亮不休我不眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP||对json数据二次处理

前言1）之前向PHP发送请求，拿到的数据都是直接返回浏览器，没有在服务器端（PHP页面）进行二次处理。本文主要就是以实例的形式，记录一下关于在PHP页面对json数据二次处理的内容。2）案例实现功能：页面初始化后有两个按钮，点击分别给添加一个item和多个item。其中每个item的框架如下：准备数据因为没有实际的数据，所以采用假数据来测试（数据来自落网）【myjson.php】[ { "path" : "imgs/432131.jpg", "name"
复制链接

扫一扫