加载代码2

最新推荐文章于 2022-03-26 13:48:02 发布

侠客博园

最新推荐文章于 2022-03-26 13:48:02 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/wen15191038073/article/details/119819721

版权

<!DOCTYPE html>
<html>

<head>
    <title>千锋教育——做真实的自己,用心做教育</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
    <button id="btn">点我加载一组</button>
    <button id="btn">点我加载第二组</button>
    <table id="bookinfo" border="1px">
        <!-- <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr> -->
    </table>
    <script>
        var oBookInfo = document.querySelector('#bookinfo');
        var oBtn = document.querySelector('#btn');

        var str = '';


        //  如果想获取不同数据，可以利用请求参数，传入的1，返回的json字符串1，传入的是2,的话，返回json字符串2
        oBtn.onclick = function () {
           getTables();
        }

        function getTables(n) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', '08_json.php');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    //  json形式的字符串如何转为 数组
                    var arr = JSON.parse(xhr.responseText).data;
                    arr.forEach(function (item, index) {
                        str += ` <tr>
                                <td>${item.name}</td>
                                <td>${item.category}</td>
                                <td>${item.desc}</td>
                            </tr>`
                    })
                    oBookInfo.innerHTML = str;
                }
            }
        }



    </script>
</body>

</html>

<?php
$jsonstr = '{
    "total":"4",
    "data":[
        {
            "name":"三国演义",
            "category":"文学",
            "desc":"一个军阀混战的年代"
        },{
            "name":"水浒传",
            "category":"文学",
            "desc":"草寇or英雄好汉"
        },{
            "name":"西游记",
            "category":"文学",
            "desc":"妖魔鬼怪牛鬼蛇神什么都有"
        },{
            "name":"红楼梦",
            "category":"文学",
            "desc":"一个封建王朝的缩影"
        }
    ]
}';

echo $jsonstr;

?>

侠客博园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加载代码2

<!DOCTYPE html><html><head> <title>千锋教育——做真实的自己,用心做教育</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body> <button id="btn">点我加载一组</button>
复制链接

扫一扫