jsonplaceholder——免费的HTTP请求假数据接口（前端小伙伴值得了解一下）

置顶人间小美味695

已于 2022-11-18 23:21:32 修改

阅读量9.5k

点赞数 11

分类专栏：前端 # 插件类 # JavaScript 文章标签： javascript jsonplaceholder 数据请求假数据

于 2021-05-13 09:43:13 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116599014

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端

25 篇文章 8 订阅

订阅专栏

插件类

15 篇文章 1 订阅

订阅专栏

内容介绍

jsonplaceholder——免费的HTTP请求假数据接口。

官网地址： http://jsonplaceholder.typicode.com/

一、优点

不需引入外部js文件。
同时支持http和https请求。
同时支持post请求和get请求。

二、GET请求

1、posts——帖子

1.1、posts

返回值共100条，相关参数：id,userId,title,body（数据id、用户id、标题、内容）
在这里插入图片描述

1.2、posts-id

返回值共1条：
在这里插入图片描述

1.3、posts-userId

返回值共10条：
在这里插入图片描述

2、comments——评论

2.1、comments

返回值共500条，相关参数：id,postId,name,body,email（数据id、帖子id、姓名、内容、邮箱）
在这里插入图片描述

2.2、comments-id

返回值共1条：
在这里插入图片描述

2.3、comments-postId

返回值共5条：
在这里插入图片描述

3、albums——专辑

3.1、albums

返回值共100条，相关参数：id,userId,title（数据id、用户id、标题）
在这里插入图片描述

3.2、albums-id

返回值共1条：
在这里插入图片描述

3.3、albums-userId

返回值共10条：
在这里插入图片描述

4、todos——待办事项

4.1、todos

返回值共200条，相关参数：id,userId,title,completed（数据id、用户id、标题、完成状态）
在这里插入图片描述

4.2、todos-id

返回值共1条：
在这里插入图片描述

4.3、todos-userId

返回值共20条：
在这里插入图片描述

5、users——用户

5.1、users

返回值共10条，相关参数：id,name,username,phone,address,company,email,website（数据id、姓名、用户名、电话、地址、公司、邮箱、网址）
在这里插入图片描述

5.2、users-id

返回值共1条：
在这里插入图片描述

6、photos——照片

6.1、photos

返回值共5000条，相关参数：id,albumId,title,url,thumbnailUrl（数据id、专辑id、标题、照片地址、缩略图地址）
在这里插入图片描述

6.2、photos-id

返回值共1条：
在这里插入图片描述

6.3、photos-albumId

返回值共50条：
在这里插入图片描述

三、POST请求

1、posts

post请求，返回值为所有请求值 + id：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    // POST请求
    function postInit() {
        $.ajax({
            type: "post",
            // 返回请求数据及随机id
            url: "https://jsonplaceholder.typicode.com/posts",
            data: {
                account: "tom",
                password: "147258",
                text: "post请求传值，返回所有值及id"
            },
            dataType: "json",
            success: function(res) {
                console.log("post请求\n", res);
            }
        });
    }

    postInit();
</script>

在这里插入图片描述

四、汇总

请求参数	请求类型	返回条数	返回参数	请求地址示例
posts	GET	100条	`id,userId,` `ititle,body`	https://jsonplaceholder.typicode.com/posts
posts-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/posts/55
posts-userId	GET	10条	`同上`	https://jsonplaceholder.typicode.com/posts?userId=5
comments	GET	500条	`id,postId,name,` `body,email`	https://jsonplaceholder.typicode.com/comments
comments-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/comments/4
comments-userId	GET	5条	`同上`	https://jsonplaceholder.typicode.com/posts/4/comments
albums	GET	100条	`id,userId,title`	https://jsonplaceholder.typicode.com/albums
albums-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/albums/4
albums-userId	GET	10条	`同上`	https://jsonplaceholder.typicode.com/albums?userId=4
todos	GET	200条	`id,userId,title,completed`	https://jsonplaceholder.typicode.com/todos
todos-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/todos/4
todos-userId	GET	20条	`同上`	https://jsonplaceholder.typicode.com/todos?userId=4
users	GET	10条	`id,name,username,` `phone,address,company,` `email,website`	https://jsonplaceholder.typicode.com/users
users-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/users/4
photos	GET	5000条	`id,albumId,title,` `thumbnailUrl,url`	https://jsonplaceholder.typicode.com/photos
photos-id	GET	1条	`同上`	https://jsonplaceholder.typicode.com/photos/4
photos-userId	GET	50条	`同上`	https://jsonplaceholder.typicode.com/photos?albumId=4
posts	POST	1条	`id+请求参数`	https://jsonplaceholder.typicode.com/posts

四、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonplaceholder——免费的HTTP请求假数据接口</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <h4>jsonplaceholder优点：</h4>
    <p>不需引入外部js文件。</p>
    <p>同时支持http和https请求。</p>
    <script>
        // GET请求
        function getInit() {
            $.ajax({
                type: "get",
                // posts：共100条——(相关参数：id,userId,title,body)
                url: "https://jsonplaceholder.typicode.com/posts",
                //posts-id：1条
                // url: "https://jsonplaceholder.typicode.com/posts/55",
                //posts-userId：10条
                // url: "https://jsonplaceholder.typicode.com/posts?userId=5",
                // comments：共500条(相关参数：id,postId,name,body,email)
                // url: "https://jsonplaceholder.typicode.com/comments",
                // comments-id：1条
                // url: "https://jsonplaceholder.typicode.com/comments/4",
                // comments-postId：5条
                // url: "https://jsonplaceholder.typicode.com/posts/4/comments",
                // albums：共100条(相关参数：id,userId,title)
                // url: "https://jsonplaceholder.typicode.com/albums",
                // albums-id：1条
                // url: "https://jsonplaceholder.typicode.com/albums/4",
                // albums-userId：10条
                // url: "https://jsonplaceholder.typicode.com/albums?userId=4",
                // todos：共200条(相关参数：id,userId,title,completed)
                // url: "https://jsonplaceholder.typicode.com/todos",
                // todos-id：1条
                // url: "https://jsonplaceholder.typicode.com/todos/4",
                // todos-userId：20条
                // url: "https://jsonplaceholder.typicode.com/todos?userId=4",
                // users：共10条(相关参数：id,name,username,phone,address,company,email,website)
                // url: "https://jsonplaceholder.typicode.com/users",
                // users-id：1条
                // url: "https://jsonplaceholder.typicode.com/users/4",
                // photos：共5000条（相关参数：id,albumId,title,url,thumbnailUrl）
                // url: "https://jsonplaceholder.typicode.com/photos",
                // photos-id：1条
                // url: "https://jsonplaceholder.typicode.com/photos/4",
                // photos-albumId：50条
                // url: "https://jsonplaceholder.typicode.com/photos?albumId=4",
                // data: "data",
                dataType: "json",
                success: function(res) {
                    console.log("get请求\n", res);
                    console.log("第一条数据\n", res[0]);
                }
            });
        }

        // POST请求
        function postInit() {
            $.ajax({
                type: "post",
                // 返回请求数据及随机id
                url: "https://jsonplaceholder.typicode.com/posts",
                data: {
                    account: "tom",
                    password: "147258",
                    text: "post请求传值，返回所有值及id"
                },
                dataType: "json",
                success: function(res) {
                    console.log("post请求\n", res);
                }
            });
        }

        getInit();
        postInit();
    </script>


</body>

</html>