devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-02-19 00:43:47

赞

踩

jsonplaceholder

目录

内容介绍

  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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

四、汇总
请求参数请求类型返回条数返回参数请求地址示例
postsGET100条id,userId, ititle,bodyhttps://jsonplaceholder.typicode.com/posts
posts-idGET1条同上https://jsonplaceholder.typicode.com/posts/55
posts-userIdGET10条同上https://jsonplaceholder.typicode.com/posts?userId=5
commentsGET500条id,postId,name, body,emailhttps://jsonplaceholder.typicode.com/comments
comments-idGET1条同上https://jsonplaceholder.typicode.com/comments/4
comments-userIdGET5条同上https://jsonplaceholder.typicode.com/posts/4/comments
albumsGET100条id,userId,titlehttps://jsonplaceholder.typicode.com/albums
albums-idGET1条同上https://jsonplaceholder.typicode.com/albums/4
albums-userIdGET10条同上https://jsonplaceholder.typicode.com/albums?userId=4
todosGET200条id,userId,title,completedhttps://jsonplaceholder.typicode.com/todos
todos-idGET1条同上https://jsonplaceholder.typicode.com/todos/4
todos-userIdGET20条同上https://jsonplaceholder.typicode.com/todos?userId=4
usersGET10条id,name,username, phone,address,company, email,websitehttps://jsonplaceholder.typicode.com/users
users-idGET1条同上https://jsonplaceholder.typicode.com/users/4
photosGET5000条id,albumId,title, thumbnailUrl,urlhttps://jsonplaceholder.typicode.com/photos
photos-idGET1条同上https://jsonplaceholder.typicode.com/photos/4
photos-userIdGET50条同上https://jsonplaceholder.typicode.com/photos?albumId=4
postsPOST1条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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88

  

标签：jsonplaceholder，数据请求，假数据，javascript

更多演示案例，查看 案例演示

欢迎评论留言!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/111623
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号