2022-04-25 GET请求取出json文件中数据并渲染,POST发送新数据进入json文件中以及json-server的应用-CSDN博客

本文链接：https://blog.csdn.net/rowlet/article/details/124416731

文章目录

一.GET请求取出json文件中数据

目标

取出以下text.json文件中的个人用户数据:

代码

text.json

{
    "data": {
        "list": [{
                "name": "zhangsan",
                "age": 18,
                "id": 1001
            },
            {
                "name": "lisi",
                "age": 20,
                "id": 1002
            },
            {
                "name": "wangwu",
                "age": 22,
                "id": 1003
            },
            {
                "name": "zhaoliu",
                "age": 25,
                "id": 1004
            },
            {
                "name": "qianqi",
                "age": 28,
                "id": 1005
            }
        ]
    }
}

*注:这是一个常见的大型JSON数据库中的节选,其中用户信息放在data中,以list数组存放一个个用户的信息

使用ajax发送GET请求

代码

<body>
    <!-- <input type="button" value="张三"> -->
    <script>
        var xhr = new XMLHttpRequest(); //创建请求对象
        // console.log(xhr);
        xhr.open("GET", "http://localhost/text.json", true); //请求方式,请求地址,是否异步
        xhr.send(); //发送请求
        xhr.onreadystatechange = function() { //设置监听
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText).data.list; //获取JSON字符串==>对象转换后的用户数组res
                    console.log(res, typeof(res)); //object
                    render(res); //渲染数据
                }
            }
            // 为每一个用户创建一个button,value就是他们的用户名,并绑定点击事件,点击出现对应的姓名,id等详细信息
        function render(res) {
            let str = "";
            for (var i = 0; i < res.length; i++) {
            //注意渲染格式
                str += `<input type="button" value="${res[i].name}" id="btn${i+1}">`;
            }
            document.body.innerHTML = str;
            var btn1 = document.getElementById("btn1");
            btn1.addEventListener("click", function() { //略
                alert(`我的年龄是:${res[0].age}`);
            })
        }
    </script>
</body>

结果

在这里插入图片描述

二.json-server的下载和使用

1.json-server:基于一个json文件就可以创建很多个后端的模拟接口

2.下载命令

在下载有node的本地环境输入命令:
npm install json-server -g
版本检查:
json-server -v

3.开启服务

json-server text.json --watch

4.结果:

 D:> json-server text.json --watch

  \{^_^}/ hi!

  Loading text.json
  Done

  Resources
  http://localhost:3000/data

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...