JavaScript XHR使用 JSONPlaceholder API 并本地搭建JSON server REST API

逃离我推掉我的手 2023-10-01 19:05 61阅读 0赞

有时，了解地面上的事情是如何发生的非常重要。本文将讨论如何借助最喜爱的 REST API 在 vanilla JavaScript 中使用 XHR - XMLHttpRequest；JSON占位符。

如果您喜欢 Web 开发，那么您可能在 AJAX 开发生涯的某个阶段遇到过 JavaScript 的 XHR。还有其他简单方便的解决方案可以处理 AJAX 调用，例如 fetch() API，或者如果使用 jQuery，则使用 ajax() 方法。XHR 在开发时的目的与今天的开发需求相比略有不同，因此在当前，fetch API 看起来比 XHR 更相关，因为它比 XHR 有很多很酷的东西。同意，从长远来看，XHR 并不是那么美好，我们最终会在 XHR 方法上创建自己的层，但至少必须了解 XMLHttpRequest 的基础知识。

XMLHttpRequest 用于从 Web 服务器获取食物数据。您可以在后台从 Web 服务器来回发送或接收数据（这意味着甚至无需刷新页面）。这种与 Web 服务器的通信称为 AJAX - 异步 JavaScript 和 XML；XHR 在这方面发挥了主导作用。

在 JavaScript 中，XMLHttpRequest 是一个对象。就像大多数其他 JS 对象一样，它过着幸福的生活并以任何方式死亡。我们可以创建一个 XHR，如下所示：

const xhr = new XMLHttpRequest();

XHR 有自己的方法和属性可供使用。由于与 Web 服务器的通信将经历多个阶段，XHR 为每个阶段提供事件，以便我们可以根据需要为这些事件提供处理程序。

> 不要犹豫，拨打 AJAX 电话。
> 
> 扎基穆罕默德

要开始使用 XHR，我们需要一些 Web 服务器端点来发送或接收数据。为此，我们将使用最流行的假 REST API，即 JSONPlaceholder。它提供端点来执行一些最常见的 REST 操作，例如 GET、POST、PUT 和 DELETE。所以让我们动手吧！

### **JSONPlaceholder API** ###

让我们先来看看 JSONPlaceholder API 及其拥有的数据。JSONPlaceholder API 保存用户、帖子、评论、相册、照片和待办事项端点。这些数据相互关联，帖子、相册和待办事项链接到用户，照片链接到相册，评论链接到帖子。

这些端点的 URL 如下：

users:
    https://jsonplaceholder.typicode.com/users
    
    posts and comments:
    https://jsonplaceholder.typicode.com/posts
    https://jsonplaceholder.typicode.com/comments
    
    albums and photos:
    https://jsonplaceholder.typicode.com/albums
    https://jsonplaceholder.typicode.com/photos
    
    todos:
    https://jsonplaceholder.typicode.com/todos

为了只获得一条记录，我们可以将相应的 id 传递给路由。下面将给出用户 ID 为 1 的用户记录：

https://jsonplaceholder.typicode.com/users/1

此外，我们可以借助查询字符串和嵌套路由过滤掉关系数据。因此，如果我们想要由具有 userId 1 的用户创建的帖子，那么我们可以使用以下 URL。下面将提供由 userId 1 创建的帖子数组。

https://jsonplaceholder.typicode.com/posts?userId=1

这也可以通过使用嵌套路由来实现，如下所示：

https://jsonplaceholder.typicode.com/users/1/posts

有关 JSONPlaceholder 的更多详细信息，请单击[此处][Link 1]访问该网站。

### **XHR** ###

为了使用 XHR 进行 AJAX 调用，我们有十年前的 onreadystatechange 属性，它是 readyState 属性更改事件的事件处理程序。下面的代码展示了 onreadystatechange 的用法：

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
    	if (this.readyState === 4 && this.status === 200) {
    		console.log(JSON.parse(xhr.responseText));
    	}
    };
    xhr.open('GET', apiUrl, true);
    xhr.send();

我们可以通过以下代码检查 onreadystatechange 事件如何在调用的不同阶段触发：

最初，readyState 设置为 0，并且当 readyState 发生变化时触发 onreadystatechange 事件。所以在我们检查readyState是否为0的情况下不会被调用，上面代码的输出如下：

server connection established: 1
    request received: 2
    processing request: 3
    request finished and response is ready: 4

xhr 的 status 属性返回 HTTP 状态代码，如 200、400、500 等。HTTP 状态代码及其含义的完整列表在[此处][Link 2]列出。

XHR 还拥有作为 readyState 变化时不同事件的事件处理程序的属性。这些事件属性甚至比我们不必手动检查 readyState 值的 onreadystatechange 更方便。这些属性如下。这些事件属性实际上是 XMLHttpRequestEventTarget 接口的一部分。有关 XMLHttpRequestEventTarget 的更多详细信息，请单击[此处][Link 3]。

onload
    onerror
    onprogress
    onabort

### **带有 JSONPlaceholder 的 XHR** ###

我们使用 XHR 和 JSONPlaceholder API 创建了一个具有基本 CRUD 操作的项目。将专注于 CRUD 操作项目的 XHR 部分。让我们使用 XHR 对象执行每个操作。

#### **阅读帖子 \[获取\]** ####

将从使用 HTTP 的 GET 方法的读取操作开始。以下代码将从 JSONPlaceholder API 带来数据。

当从服务器接收到响应时调用 onload() 方法。我们还必须检查我们从服务器收到的响应的状态，如果它是 200 OK，那么这意味着我们可以继续。任何其他响应都不会提供帖子数据。可以使用 responseText 属性获取数据，但不会采用 JSON 格式。所以我们使用 JSON.parse() 方法将其转换回 JSON。

**注意：**我们使用箭头函数作为 onload 事件的事件处理程序，这就是为什么我们必须使用 xhr 来获取 xhr 属性，如果我们想使用这关键字，那么我们必须使用普通函数而不是箭头函数。

#### **创建帖子 \[POST\]** ####

为了创建帖子，我们必须使用 HTTP POST 方法将帖子数据作为 JSON 对象传递。根据 JSONPlaceholder API，帖子对象必须包含以下属性才能创建新帖子。

{
      title: 'foo',
      body: 'bar',
      userId: 1
    }

JSONPlaceholder 对此 POST 请求的响应将是一个 JSON 对象，如下所示。响应中的 id 将始终为 101，并且在 API 端没有创建真实对象，这只是我们从 JSONPlaceholder REST API 获得的虚假响应，响应 HTTP 状态为 201。我们将无法使用新生成的post id 来编辑或删除操作，因为此资源实际上并不存在于 API 的末尾，因此它不适用于新的 post id。

{
      id: 101,
      title: 'foo',
      body: 'bar',
      userId: 1
    }

让我们看看 POST 调用（创建操作）的代码逻辑。

GET 和 POST 调用之间的主要区别是我们将对象或任何内容传递给 xhr.send() 方法，同时在响应头中指定内容的类型；在上面的代码中，我们将 Content-Type 称为 application/json。一个更重要的方面是我们必须将我们的 JSON 对象转换为字符串（文本内容）。

#### **更新帖子 \[PUT\]** ####

PUT 调用的大部分将保留为 POST 调用。它的唯一区别是帖子ID。包括正文对象，我们必须传递帖子 ID，并且在 URL 中，我们必须在末尾附加帖子 ID。它将返回我们作为请求对象传递的相同对象。最后，HTTP 方法名称为 PUT，响应状态码为 200。另外需要注意的一点是，我们在 open() 方法的 url 参数中传递了 1 作为 post id，原因是 JSONPlaceholder不会更新新创建的记录，因为 API 端不存在这样的对象。这就是为什么我们在两个地方（在正文和 URL 中）都将帖子 ID 传递为 1。这只是为了处理 JSONPlaceholder API，以防我们构建自己的 API 这不会'

#### **删除帖子\[删除\]** ####

在 DELETE 的情况下，它将返回一个空对象 \{\} 作为响应，状态码将为 200。不会像 PUT 那样存在 id 问题，它适用于任何提供的 id。

现在这使用带有 JSONPlaceholder API 的 XHR 完成了我们的 CRUD 操作。我们创建了一个 SPA（单页应用程序）来使用 JSONPlaceholder API 的帖子进行 CRUD 操作。显然，该项目还包含 UI 操作代码，在上面的示例中没有提到，因为本文主要关注 XHR 而不是 JavaScript 中的 UI 操作。

### **Git 存储库** ###

查看此项目的 git 存储库或下载代码。

[下载代码][Link 4] [Git 存储库][Git]

### **概括** ###

XHR 是使用 Vanilla JavaScript 实现 AJAX 的基础。我们已经了解了如何创建 XHR 对象并使用不同的 XHR 事件。还处理了不同的 HTTP 方法并处理了响应。因此，是否使用 XHR 取决于开发人员的选择，当然其他选项也很难忽略，例如 fetch API，因为与 XHR 相比，在今天做 AJAX 更相关；将把辩论留到未来。

希望这篇文章有所帮助。

JSONPlaceholder 的示例可以使用 GET、POST、PUT、PATCH 和 DELETE。调用之间不会保留更改。

--------------------

资源

*https://github.com/typicode/demo/blob/\[main|master\]/db.json*

也可通过JSON server本地托管posts.json文件创建 REST API，步骤如下：

访问[https://jsonplaceholder.typicode.com/posts][https_jsonplaceholder.typicode.com_posts]下载posts.json文件

[
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      },
      {
        "userId": 1,
        "id": 2,
        "title": "qui est esse",
        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
      },
      {
        "userId": 1,
        "id": 3,
        "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
      },
      {
        "userId": 1,
        "id": 4,
        "title": "eum et est occaecati",
        "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
      },
      {
        "userId": 1,
        "id": 5,
        "title": "nesciunt quas odio",
        "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
      },
      {
        "userId": 1,
        "id": 6,
        "title": "dolorem eum magni eos aperiam quia",
        "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
      },
      {
        "userId": 1,
        "id": 7,
        "title": "magnam facilis autem",
        "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
      },
      {
        "userId": 1,
        "id": 8,
        "title": "dolorem dolore est ipsam",
        "body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
      },
      {
        "userId": 1,
        "id": 9,
        "title": "nesciunt iure omnis dolorem tempora et accusantium",
        "body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
      },
      {
        "userId": 1,
        "id": 10,
        "title": "optio molestias id quia eum",
        "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
      },
      {
        "userId": 2,
        "id": 11,
        "title": "et ea vero quia laudantium autem",
        "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
      },
      {
        "userId": 2,
        "id": 12,
        "title": "in quibusdam tempore odit est dolorem",
        "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
      },
      {
        "userId": 2,
        "id": 13,
        "title": "dolorum ut in voluptas mollitia et saepe quo animi",
        "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
      },
      {
        "userId": 2,
        "id": 14,
        "title": "voluptatem eligendi optio",
        "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
      },
      {
        "userId": 2,
        "id": 15,
        "title": "eveniet quod temporibus",
        "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
      },
      {
        "userId": 2,
        "id": 16,
        "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
        "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
      },
      {
        "userId": 2,
        "id": 17,
        "title": "fugit voluptas sed molestias voluptatem provident",
        "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
      },
      {
        "userId": 2,
        "id": 18,
        "title": "voluptate et itaque vero tempora molestiae",
        "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
      },
      {
        "userId": 2,
        "id": 19,
        "title": "adipisci placeat illum aut reiciendis qui",
        "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
      },
      {
        "userId": 2,
        "id": 20,
        "title": "doloribus ad provident suscipit at",
        "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
      },
      {
        "userId": 3,
        "id": 21,
        "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
        "body": "repellat aliquid praesentium dolorem quo\nsed totam minus non itaque\nnihil labore molestiae sunt dolor eveniet hic recusandae veniam\ntempora et tenetur expedita sunt"
      },
      {
        "userId": 3,
        "id": 22,
        "title": "dolor sint quo a velit explicabo quia nam",
        "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
      },
      {
        "userId": 3,
        "id": 23,
        "title": "maxime id vitae nihil numquam",
        "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
      },
      {
        "userId": 3,
        "id": 24,
        "title": "autem hic labore sunt dolores incidunt",
        "body": "enim et ex nulla\nomnis voluptas quia qui\nvoluptatem consequatur numquam aliquam sunt\ntotam recusandae id dignissimos aut sed asperiores deserunt"
      },
      {
        "userId": 3,
        "id": 25,
        "title": "rem alias distinctio quo quis",
        "body": "ullam consequatur ut\nomnis quis sit vel consequuntur\nipsa eligendi ipsum molestiae et omnis error nostrum\nmolestiae illo tempore quia et distinctio"
      },
      {
        "userId": 3,
        "id": 26,
        "title": "est et quae odit qui non",
        "body": "similique esse doloribus nihil accusamus\nomnis dolorem fuga consequuntur reprehenderit fugit recusandae temporibus\nperspiciatis cum ut laudantium\nomnis aut molestiae vel vero"
      },
      {
        "userId": 3,
        "id": 27,
        "title": "quasi id et eos tenetur aut quo autem",
        "body": "eum sed dolores ipsam sint possimus debitis occaecati\ndebitis qui qui et\nut placeat enim earum aut odit facilis\nconsequatur suscipit necessitatibus rerum sed inventore temporibus consequatur"
      },
      {
        "userId": 3,
        "id": 28,
        "title": "delectus ullam et corporis nulla voluptas sequi",
        "body": "non et quaerat ex quae ad maiores\nmaiores recusandae totam aut blanditiis mollitia quas illo\nut voluptatibus voluptatem\nsimilique nostrum eum"
      },
      {
        "userId": 3,
        "id": 29,
        "title": "iusto eius quod necessitatibus culpa ea",
        "body": "odit magnam ut saepe sed non qui\ntempora atque nihil\naccusamus illum doloribus illo dolor\neligendi repudiandae odit magni similique sed cum maiores"
      },
      {
        "userId": 3,
        "id": 30,
        "title": "a quo magni similique perferendis",
        "body": "alias dolor cumque\nimpedit blanditiis non eveniet odio maxime\nblanditiis amet eius quis tempora quia autem rem\na provident perspiciatis quia"
      },
      {
        "userId": 4,
        "id": 31,
        "title": "ullam ut quidem id aut vel consequuntur",
        "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
      },
      {
        "userId": 4,
        "id": 32,
        "title": "doloremque illum aliquid sunt",
        "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
      },
      {
        "userId": 4,
        "id": 33,
        "title": "qui explicabo molestiae dolorem",
        "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
      },
      {
        "userId": 4,
        "id": 34,
        "title": "magnam ut rerum iure",
        "body": "ea velit perferendis earum ut voluptatem voluptate itaque iusto\ntotam pariatur in\nnemo voluptatem voluptatem autem magni tempora minima in\nest distinctio qui assumenda accusamus dignissimos officia nesciunt nobis"
      },
      {
        "userId": 4,
        "id": 35,
        "title": "id nihil consequatur molestias animi provident",
        "body": "nisi error delectus possimus ut eligendi vitae\nplaceat eos harum cupiditate facilis reprehenderit voluptatem beatae\nmodi ducimus quo illum voluptas eligendi\net nobis quia fugit"
      },
      {
        "userId": 4,
        "id": 36,
        "title": "fuga nam accusamus voluptas reiciendis itaque",
        "body": "ad mollitia et omnis minus architecto odit\nvoluptas doloremque maxime aut non ipsa qui alias veniam\nblanditiis culpa aut quia nihil cumque facere et occaecati\nqui aspernatur quia eaque ut aperiam inventore"
      },
      {
        "userId": 4,
        "id": 37,
        "title": "provident vel ut sit ratione est",
        "body": "debitis et eaque non officia sed nesciunt pariatur vel\nvoluptatem iste vero et ea\nnumquam aut expedita ipsum nulla in\nvoluptates omnis consequatur aut enim officiis in quam qui"
      },
      {
        "userId": 4,
        "id": 38,
        "title": "explicabo et eos deleniti nostrum ab id repellendus",
        "body": "animi esse sit aut sit nesciunt assumenda eum voluptas\nquia voluptatibus provident quia necessitatibus ea\nrerum repudiandae quia voluptatem delectus fugit aut id quia\nratione optio eos iusto veniam iure"
      },
      {
        "userId": 4,
        "id": 39,
        "title": "eos dolorem iste accusantium est eaque quam",
        "body": "corporis rerum ducimus vel eum accusantium\nmaxime aspernatur a porro possimus iste omnis\nest in deleniti asperiores fuga aut\nvoluptas sapiente vel dolore minus voluptatem incidunt ex"
      },
      {
        "userId": 4,
        "id": 40,
        "title": "enim quo cumque",
        "body": "ut voluptatum aliquid illo tenetur nemo sequi quo facilis\nipsum rem optio mollitia quas\nvoluptatem eum voluptas qui\nunde omnis voluptatem iure quasi maxime voluptas nam"
      },
      {
        "userId": 5,
        "id": 41,
        "title": "non est facere",
        "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
      },
      {
        "userId": 5,
        "id": 42,
        "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
        "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
      },
      {
        "userId": 5,
        "id": 43,
        "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
        "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
      },
      {
        "userId": 5,
        "id": 44,
        "title": "optio dolor molestias sit",
        "body": "temporibus est consectetur dolore\net libero debitis vel velit laboriosam quia\nipsum quibusdam qui itaque fuga rem aut\nea et iure quam sed maxime ut distinctio quae"
      },
      {
        "userId": 5,
        "id": 45,
        "title": "ut numquam possimus omnis eius suscipit laudantium iure",
        "body": "est natus reiciendis nihil possimus aut provident\nex et dolor\nrepellat pariatur est\nnobis rerum repellendus dolorem autem"
      },
      {
        "userId": 5,
        "id": 46,
        "title": "aut quo modi neque nostrum ducimus",
        "body": "voluptatem quisquam iste\nvoluptatibus natus officiis facilis dolorem\nquis quas ipsam\nvel et voluptatum in aliquid"
      },
      {
        "userId": 5,
        "id": 47,
        "title": "quibusdam cumque rem aut deserunt",
        "body": "voluptatem assumenda ut qui ut cupiditate aut impedit veniam\noccaecati nemo illum voluptatem laudantium\nmolestiae beatae rerum ea iure soluta nostrum\neligendi et voluptate"
      },
      {
        "userId": 5,
        "id": 48,
        "title": "ut voluptatem illum ea doloribus itaque eos",
        "body": "voluptates quo voluptatem facilis iure occaecati\nvel assumenda rerum officia et\nillum perspiciatis ab deleniti\nlaudantium repellat ad ut et autem reprehenderit"
      },
      {
        "userId": 5,
        "id": 49,
        "title": "laborum non sunt aut ut assumenda perspiciatis voluptas",
        "body": "inventore ab sint\nnatus fugit id nulla sequi architecto nihil quaerat\neos tenetur in in eum veritatis non\nquibusdam officiis aspernatur cumque aut commodi aut"
      },
      {
        "userId": 5,
        "id": 50,
        "title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
        "body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
      },
      {
        "userId": 6,
        "id": 51,
        "title": "soluta aliquam aperiam consequatur illo quis voluptas",
        "body": "sunt dolores aut doloribus\ndolore doloribus voluptates tempora et\ndoloremque et quo\ncum asperiores sit consectetur dolorem"
      },
      {
        "userId": 6,
        "id": 52,
        "title": "qui enim et consequuntur quia animi quis voluptate quibusdam",
        "body": "iusto est quibusdam fuga quas quaerat molestias\na enim ut sit accusamus enim\ntemporibus iusto accusantium provident architecto\nsoluta esse reprehenderit qui laborum"
      },
      {
        "userId": 6,
        "id": 53,
        "title": "ut quo aut ducimus alias",
        "body": "minima harum praesentium eum rerum illo dolore\nquasi exercitationem rerum nam\nporro quis neque quo\nconsequatur minus dolor quidem veritatis sunt non explicabo similique"
      },
      {
        "userId": 6,
        "id": 54,
        "title": "sit asperiores ipsam eveniet odio non quia",
        "body": "totam corporis dignissimos\nvitae dolorem ut occaecati accusamus\nex velit deserunt\net exercitationem vero incidunt corrupti mollitia"
      },
      {
        "userId": 6,
        "id": 55,
        "title": "sit vel voluptatem et non libero",
        "body": "debitis excepturi ea perferendis harum libero optio\neos accusamus cum fuga ut sapiente repudiandae\net ut incidunt omnis molestiae\nnihil ut eum odit"
      },
      {
        "userId": 6,
        "id": 56,
        "title": "qui et at rerum necessitatibus",
        "body": "aut est omnis dolores\nneque rerum quod ea rerum velit pariatur beatae excepturi\net provident voluptas corrupti\ncorporis harum reprehenderit dolores eligendi"
      },
      {
        "userId": 6,
        "id": 57,
        "title": "sed ab est est",
        "body": "at pariatur consequuntur earum quidem\nquo est laudantium soluta voluptatem\nqui ullam et est\net cum voluptas voluptatum repellat est"
      },
      {
        "userId": 6,
        "id": 58,
        "title": "voluptatum itaque dolores nisi et quasi",
        "body": "veniam voluptatum quae adipisci id\net id quia eos ad et dolorem\naliquam quo nisi sunt eos impedit error\nad similique veniam"
      },
      {
        "userId": 6,
        "id": 59,
        "title": "qui commodi dolor at maiores et quis id accusantium",
        "body": "perspiciatis et quam ea autem temporibus non voluptatibus qui\nbeatae a earum officia nesciunt dolores suscipit voluptas et\nanimi doloribus cum rerum quas et magni\net hic ut ut commodi expedita sunt"
      },
      {
        "userId": 6,
        "id": 60,
        "title": "consequatur placeat omnis quisquam quia reprehenderit fugit veritatis facere",
        "body": "asperiores sunt ab assumenda cumque modi velit\nqui esse omnis\nvoluptate et fuga perferendis voluptas\nillo ratione amet aut et omnis"
      },
      {
        "userId": 7,
        "id": 61,
        "title": "voluptatem doloribus consectetur est ut ducimus",
        "body": "ab nemo optio odio\ndelectus tenetur corporis similique nobis repellendus rerum omnis facilis\nvero blanditiis debitis in nesciunt doloribus dicta dolores\nmagnam minus velit"
      },
      {
        "userId": 7,
        "id": 62,
        "title": "beatae enim quia vel",
        "body": "enim aspernatur illo distinctio quae praesentium\nbeatae alias amet delectus qui voluptate distinctio\nodit sint accusantium autem omnis\nquo molestiae omnis ea eveniet optio"
      },
      {
        "userId": 7,
        "id": 63,
        "title": "voluptas blanditiis repellendus animi ducimus error sapiente et suscipit",
        "body": "enim adipisci aspernatur nemo\nnumquam omnis facere dolorem dolor ex quis temporibus incidunt\nab delectus culpa quo reprehenderit blanditiis asperiores\naccusantium ut quam in voluptatibus voluptas ipsam dicta"
      },
      {
        "userId": 7,
        "id": 64,
        "title": "et fugit quas eum in in aperiam quod",
        "body": "id velit blanditiis\neum ea voluptatem\nmolestiae sint occaecati est eos perspiciatis\nincidunt a error provident eaque aut aut qui"
      },
      {
        "userId": 7,
        "id": 65,
        "title": "consequatur id enim sunt et et",
        "body": "voluptatibus ex esse\nsint explicabo est aliquid cumque adipisci fuga repellat labore\nmolestiae corrupti ex saepe at asperiores et perferendis\nnatus id esse incidunt pariatur"
      },
      {
        "userId": 7,
        "id": 66,
        "title": "repudiandae ea animi iusto",
        "body": "officia veritatis tenetur vero qui itaque\nsint non ratione\nsed et ut asperiores iusto eos molestiae nostrum\nveritatis quibusdam et nemo iusto saepe"
      },
      {
        "userId": 7,
        "id": 67,
        "title": "aliquid eos sed fuga est maxime repellendus",
        "body": "reprehenderit id nostrum\nvoluptas doloremque pariatur sint et accusantium quia quod aspernatur\net fugiat amet\nnon sapiente et consequatur necessitatibus molestiae"
      },
      {
        "userId": 7,
        "id": 68,
        "title": "odio quis facere architecto reiciendis optio",
        "body": "magnam molestiae perferendis quisquam\nqui cum reiciendis\nquaerat animi amet hic inventore\nea quia deleniti quidem saepe porro velit"
      },
      {
        "userId": 7,
        "id": 69,
        "title": "fugiat quod pariatur odit minima",
        "body": "officiis error culpa consequatur modi asperiores et\ndolorum assumenda voluptas et vel qui aut vel rerum\nvoluptatum quisquam perspiciatis quia rerum consequatur totam quas\nsequi commodi repudiandae asperiores et saepe a"
      },
      {
        "userId": 7,
        "id": 70,
        "title": "voluptatem laborum magni",
        "body": "sunt repellendus quae\nest asperiores aut deleniti esse accusamus repellendus quia aut\nquia dolorem unde\neum tempora esse dolore"
      },
      {
        "userId": 8,
        "id": 71,
        "title": "et iusto veniam et illum aut fuga",
        "body": "occaecati a doloribus\niste saepe consectetur placeat eum voluptate dolorem et\nqui quo quia voluptas\nrerum ut id enim velit est perferendis"
      },
      {
        "userId": 8,
        "id": 72,
        "title": "sint hic doloribus consequatur eos non id",
        "body": "quam occaecati qui deleniti consectetur\nconsequatur aut facere quas exercitationem aliquam hic voluptas\nneque id sunt ut aut accusamus\nsunt consectetur expedita inventore velit"
      },
      {
        "userId": 8,
        "id": 73,
        "title": "consequuntur deleniti eos quia temporibus ab aliquid at",
        "body": "voluptatem cumque tenetur consequatur expedita ipsum nemo quia explicabo\naut eum minima consequatur\ntempore cumque quae est et\net in consequuntur voluptatem voluptates aut"
      },
      {
        "userId": 8,
        "id": 74,
        "title": "enim unde ratione doloribus quas enim ut sit sapiente",
        "body": "odit qui et et necessitatibus sint veniam\nmollitia amet doloremque molestiae commodi similique magnam et quam\nblanditiis est itaque\nquo et tenetur ratione occaecati molestiae tempora"
      },
      {
        "userId": 8,
        "id": 75,
        "title": "dignissimos eum dolor ut enim et delectus in",
        "body": "commodi non non omnis et voluptas sit\nautem aut nobis magnam et sapiente voluptatem\net laborum repellat qui delectus facilis temporibus\nrerum amet et nemo voluptate expedita adipisci error dolorem"
      },
      {
        "userId": 8,
        "id": 76,
        "title": "doloremque officiis ad et non perferendis",
        "body": "ut animi facere\ntotam iusto tempore\nmolestiae eum aut et dolorem aperiam\nquaerat recusandae totam odio"
      },
      {
        "userId": 8,
        "id": 77,
        "title": "necessitatibus quasi exercitationem odio",
        "body": "modi ut in nulla repudiandae dolorum nostrum eos\naut consequatur omnis\nut incidunt est omnis iste et quam\nvoluptates sapiente aliquam asperiores nobis amet corrupti repudiandae provident"
      },
      {
        "userId": 8,
        "id": 78,
        "title": "quam voluptatibus rerum veritatis",
        "body": "nobis facilis odit tempore cupiditate quia\nassumenda doloribus rerum qui ea\nillum et qui totam\naut veniam repellendus"
      },
      {
        "userId": 8,
        "id": 79,
        "title": "pariatur consequatur quia magnam autem omnis non amet",
        "body": "libero accusantium et et facere incidunt sit dolorem\nnon excepturi qui quia sed laudantium\nquisquam molestiae ducimus est\nofficiis esse molestiae iste et quos"
      },
      {
        "userId": 8,
        "id": 80,
        "title": "labore in ex et explicabo corporis aut quas",
        "body": "ex quod dolorem ea eum iure qui provident amet\nquia qui facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero fugit rerum sint sunt excepturi provident"
      },
      {
        "userId": 9,
        "id": 81,
        "title": "tempora rem veritatis voluptas quo dolores vero",
        "body": "facere qui nesciunt est voluptatum voluptatem nisi\nsequi eligendi necessitatibus ea at rerum itaque\nharum non ratione velit laboriosam quis consequuntur\nex officiis minima doloremque voluptas ut aut"
      },
      {
        "userId": 9,
        "id": 82,
        "title": "laudantium voluptate suscipit sunt enim enim",
        "body": "ut libero sit aut totam inventore sunt\nporro sint qui sunt molestiae\nconsequatur cupiditate qui iste ducimus adipisci\ndolor enim assumenda soluta laboriosam amet iste delectus hic"
      },
      {
        "userId": 9,
        "id": 83,
        "title": "odit et voluptates doloribus alias odio et",
        "body": "est molestiae facilis quis tempora numquam nihil qui\nvoluptate sapiente consequatur est qui\nnecessitatibus autem aut ipsa aperiam modi dolore numquam\nreprehenderit eius rem quibusdam"
      },
      {
        "userId": 9,
        "id": 84,
        "title": "optio ipsam molestias necessitatibus occaecati facilis veritatis dolores aut",
        "body": "sint molestiae magni a et quos\neaque et quasi\nut rerum debitis similique veniam\nrecusandae dignissimos dolor incidunt consequatur odio"
      },
      {
        "userId": 9,
        "id": 85,
        "title": "dolore veritatis porro provident adipisci blanditiis et sunt",
        "body": "similique sed nisi voluptas iusto omnis\nmollitia et quo\nassumenda suscipit officia magnam sint sed tempora\nenim provident pariatur praesentium atque animi amet ratione"
      },
      {
        "userId": 9,
        "id": 86,
        "title": "placeat quia et porro iste",
        "body": "quasi excepturi consequatur iste autem temporibus sed molestiae beatae\net quaerat et esse ut\nvoluptatem occaecati et vel explicabo autem\nasperiores pariatur deserunt optio"
      },
      {
        "userId": 9,
        "id": 87,
        "title": "nostrum quis quasi placeat",
        "body": "eos et molestiae\nnesciunt ut a\ndolores perspiciatis repellendus repellat aliquid\nmagnam sint rem ipsum est"
      },
      {
        "userId": 9,
        "id": 88,
        "title": "sapiente omnis fugit eos",
        "body": "consequatur omnis est praesentium\nducimus non iste\nneque hic deserunt\nvoluptatibus veniam cum et rerum sed"
      },
      {
        "userId": 9,
        "id": 89,
        "title": "sint soluta et vel magnam aut ut sed qui",
        "body": "repellat aut aperiam totam temporibus autem et\narchitecto magnam ut\nconsequatur qui cupiditate rerum quia soluta dignissimos nihil iure\ntempore quas est"
      },
      {
        "userId": 9,
        "id": 90,
        "title": "ad iusto omnis odit dolor voluptatibus",
        "body": "minus omnis soluta quia\nqui sed adipisci voluptates illum ipsam voluptatem\neligendi officia ut in\neos soluta similique molestias praesentium blanditiis"
      },
      {
        "userId": 10,
        "id": 91,
        "title": "aut amet sed",
        "body": "libero voluptate eveniet aperiam sed\nsunt placeat suscipit molestias\nsimilique fugit nam natus\nexpedita consequatur consequatur dolores quia eos et placeat"
      },
      {
        "userId": 10,
        "id": 92,
        "title": "ratione ex tenetur perferendis",
        "body": "aut et excepturi dicta laudantium sint rerum nihil\nlaudantium et at\na neque minima officia et similique libero et\ncommodi voluptate qui"
      },
      {
        "userId": 10,
        "id": 93,
        "title": "beatae soluta recusandae",
        "body": "dolorem quibusdam ducimus consequuntur dicta aut quo laboriosam\nvoluptatem quis enim recusandae ut sed sunt\nnostrum est odit totam\nsit error sed sunt eveniet provident qui nulla"
      },
      {
        "userId": 10,
        "id": 94,
        "title": "qui qui voluptates illo iste minima",
        "body": "aspernatur expedita soluta quo ab ut similique\nexpedita dolores amet\nsed temporibus distinctio magnam saepe deleniti\nomnis facilis nam ipsum natus sint similique omnis"
      },
      {
        "userId": 10,
        "id": 95,
        "title": "id minus libero illum nam ad officiis",
        "body": "earum voluptatem facere provident blanditiis velit laboriosam\npariatur accusamus odio saepe\ncumque dolor qui a dicta ab doloribus consequatur omnis\ncorporis cupiditate eaque assumenda ad nesciunt"
      },
      {
        "userId": 10,
        "id": 96,
        "title": "quaerat velit veniam amet cupiditate aut numquam ut sequi",
        "body": "in non odio excepturi sint eum\nlabore voluptates vitae quia qui et\ninventore itaque rerum\nveniam non exercitationem delectus aut"
      },
      {
        "userId": 10,
        "id": 97,
        "title": "quas fugiat ut perspiciatis vero provident",
        "body": "eum non blanditiis soluta porro quibusdam voluptas\nvel voluptatem qui placeat dolores qui velit aut\nvel inventore aut cumque culpa explicabo aliquid at\nperspiciatis est et voluptatem dignissimos dolor itaque sit nam"
      },
      {
        "userId": 10,
        "id": 98,
        "title": "laboriosam dolor voluptates",
        "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores"
      },
      {
        "userId": 10,
        "id": 99,
        "title": "temporibus sit alias delectus eligendi possimus magni",
        "body": "quo deleniti praesentium dicta non quod\naut est molestias\nmolestias et officia quis nihil\nitaque dolorem quia"
      },
      {
        "userId": 10,
        "id": 100,
        "title": "at nam consequatur ea labore ea harum",
        "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
      }
    ]

编辑posts.json文件，增加对象名称（表名）

{
      "posts": [
        {
          "id": 1,
          "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
          "userId": 1
        },
        {
          "userId": 1,
          "id": 2,
          "title": "qui est esse",
          "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
          "userId": 1,
          "id": 3,
          "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
          "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
          "userId": 1,
          "id": 4,
          "title": "eum et est occaecati",
          "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        },
        {
          "userId": 1,
          "id": 5,
          "title": "nesciunt quas odio",
          "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
        },
        {
          "userId": 1,
          "id": 6,
          "title": "dolorem eum magni eos aperiam quia",
          "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
        },
        {
          "userId": 1,
          "id": 7,
          "title": "magnam facilis autem",
          "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
        },
        {
          "userId": 1,
          "id": 8,
          "title": "dolorem dolore est ipsam",
          "body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
        },
        {
          "userId": 1,
          "id": 9,
          "title": "nesciunt iure omnis dolorem tempora et accusantium",
          "body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
        },
        {
          "userId": 1,
          "id": 10,
          "title": "optio molestias id quia eum",
          "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
        },
        {
          "userId": 2,
          "id": 11,
          "title": "et ea vero quia laudantium autem",
          "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
        },
        {
          "userId": 2,
          "id": 12,
          "title": "in quibusdam tempore odit est dolorem",
          "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
        },
        {
          "userId": 2,
          "id": 13,
          "title": "dolorum ut in voluptas mollitia et saepe quo animi",
          "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
        },
        {
          "userId": 2,
          "id": 14,
          "title": "voluptatem eligendi optio",
          "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
        },
        {
          "userId": 2,
          "id": 15,
          "title": "eveniet quod temporibus",
          "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
        },
        {
          "userId": 2,
          "id": 16,
          "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
          "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
        },
        {
          "userId": 2,
          "id": 17,
          "title": "fugit voluptas sed molestias voluptatem provident",
          "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
        },
        {
          "userId": 2,
          "id": 18,
          "title": "voluptate et itaque vero tempora molestiae",
          "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
        },
        {
          "userId": 2,
          "id": 19,
          "title": "adipisci placeat illum aut reiciendis qui",
          "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
        },
        {
          "userId": 2,
          "id": 20,
          "title": "doloribus ad provident suscipit at",
          "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
        },
        {
          "userId": 3,
          "id": 21,
          "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
          "body": "repellat aliquid praesentium dolorem quo\nsed totam minus non itaque\nnihil labore molestiae sunt dolor eveniet hic recusandae veniam\ntempora et tenetur expedita sunt"
        },
        {
          "userId": 3,
          "id": 22,
          "title": "dolor sint quo a velit explicabo quia nam",
          "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
        },
        {
          "userId": 3,
          "id": 23,
          "title": "maxime id vitae nihil numquam",
          "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
        },
        {
          "userId": 3,
          "id": 24,
          "title": "autem hic labore sunt dolores incidunt",
          "body": "enim et ex nulla\nomnis voluptas quia qui\nvoluptatem consequatur numquam aliquam sunt\ntotam recusandae id dignissimos aut sed asperiores deserunt"
        },
        {
          "userId": 3,
          "id": 25,
          "title": "rem alias distinctio quo quis",
          "body": "ullam consequatur ut\nomnis quis sit vel consequuntur\nipsa eligendi ipsum molestiae et omnis error nostrum\nmolestiae illo tempore quia et distinctio"
        },
        {
          "userId": 3,
          "id": 26,
          "title": "est et quae odit qui non",
          "body": "similique esse doloribus nihil accusamus\nomnis dolorem fuga consequuntur reprehenderit fugit recusandae temporibus\nperspiciatis cum ut laudantium\nomnis aut molestiae vel vero"
        },
        {
          "userId": 3,
          "id": 27,
          "title": "quasi id et eos tenetur aut quo autem",
          "body": "eum sed dolores ipsam sint possimus debitis occaecati\ndebitis qui qui et\nut placeat enim earum aut odit facilis\nconsequatur suscipit necessitatibus rerum sed inventore temporibus consequatur"
        },
        {
          "userId": 3,
          "id": 28,
          "title": "delectus ullam et corporis nulla voluptas sequi",
          "body": "non et quaerat ex quae ad maiores\nmaiores recusandae totam aut blanditiis mollitia quas illo\nut voluptatibus voluptatem\nsimilique nostrum eum"
        },
        {
          "userId": 3,
          "id": 29,
          "title": "iusto eius quod necessitatibus culpa ea",
          "body": "odit magnam ut saepe sed non qui\ntempora atque nihil\naccusamus illum doloribus illo dolor\neligendi repudiandae odit magni similique sed cum maiores"
        },
        {
          "userId": 3,
          "id": 30,
          "title": "a quo magni similique perferendis",
          "body": "alias dolor cumque\nimpedit blanditiis non eveniet odio maxime\nblanditiis amet eius quis tempora quia autem rem\na provident perspiciatis quia"
        },
        {
          "userId": 4,
          "id": 31,
          "title": "ullam ut quidem id aut vel consequuntur",
          "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
        },
        {
          "userId": 4,
          "id": 32,
          "title": "doloremque illum aliquid sunt",
          "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
        },
        {
          "userId": 4,
          "id": 33,
          "title": "qui explicabo molestiae dolorem",
          "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
        },
        {
          "userId": 4,
          "id": 34,
          "title": "magnam ut rerum iure",
          "body": "ea velit perferendis earum ut voluptatem voluptate itaque iusto\ntotam pariatur in\nnemo voluptatem voluptatem autem magni tempora minima in\nest distinctio qui assumenda accusamus dignissimos officia nesciunt nobis"
        },
        {
          "userId": 4,
          "id": 35,
          "title": "id nihil consequatur molestias animi provident",
          "body": "nisi error delectus possimus ut eligendi vitae\nplaceat eos harum cupiditate facilis reprehenderit voluptatem beatae\nmodi ducimus quo illum voluptas eligendi\net nobis quia fugit"
        },
        {
          "userId": 4,
          "id": 36,
          "title": "fuga nam accusamus voluptas reiciendis itaque",
          "body": "ad mollitia et omnis minus architecto odit\nvoluptas doloremque maxime aut non ipsa qui alias veniam\nblanditiis culpa aut quia nihil cumque facere et occaecati\nqui aspernatur quia eaque ut aperiam inventore"
        },
        {
          "userId": 4,
          "id": 37,
          "title": "provident vel ut sit ratione est",
          "body": "debitis et eaque non officia sed nesciunt pariatur vel\nvoluptatem iste vero et ea\nnumquam aut expedita ipsum nulla in\nvoluptates omnis consequatur aut enim officiis in quam qui"
        },
        {
          "userId": 4,
          "id": 38,
          "title": "explicabo et eos deleniti nostrum ab id repellendus",
          "body": "animi esse sit aut sit nesciunt assumenda eum voluptas\nquia voluptatibus provident quia necessitatibus ea\nrerum repudiandae quia voluptatem delectus fugit aut id quia\nratione optio eos iusto veniam iure"
        },
        {
          "userId": 4,
          "id": 39,
          "title": "eos dolorem iste accusantium est eaque quam",
          "body": "corporis rerum ducimus vel eum accusantium\nmaxime aspernatur a porro possimus iste omnis\nest in deleniti asperiores fuga aut\nvoluptas sapiente vel dolore minus voluptatem incidunt ex"
        },
        {
          "userId": 4,
          "id": 40,
          "title": "enim quo cumque",
          "body": "ut voluptatum aliquid illo tenetur nemo sequi quo facilis\nipsum rem optio mollitia quas\nvoluptatem eum voluptas qui\nunde omnis voluptatem iure quasi maxime voluptas nam"
        },
        {
          "userId": 5,
          "id": 41,
          "title": "non est facere",
          "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
        },
        {
          "userId": 5,
          "id": 42,
          "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
          "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
        },
        {
          "userId": 5,
          "id": 43,
          "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
          "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
        },
        {
          "userId": 5,
          "id": 44,
          "title": "optio dolor molestias sit",
          "body": "temporibus est consectetur dolore\net libero debitis vel velit laboriosam quia\nipsum quibusdam qui itaque fuga rem aut\nea et iure quam sed maxime ut distinctio quae"
        },
        {
          "userId": 5,
          "id": 45,
          "title": "ut numquam possimus omnis eius suscipit laudantium iure",
          "body": "est natus reiciendis nihil possimus aut provident\nex et dolor\nrepellat pariatur est\nnobis rerum repellendus dolorem autem"
        },
        {
          "userId": 5,
          "id": 46,
          "title": "aut quo modi neque nostrum ducimus",
          "body": "voluptatem quisquam iste\nvoluptatibus natus officiis facilis dolorem\nquis quas ipsam\nvel et voluptatum in aliquid"
        },
        {
          "userId": 5,
          "id": 47,
          "title": "quibusdam cumque rem aut deserunt",
          "body": "voluptatem assumenda ut qui ut cupiditate aut impedit veniam\noccaecati nemo illum voluptatem laudantium\nmolestiae beatae rerum ea iure soluta nostrum\neligendi et voluptate"
        },
        {
          "userId": 5,
          "id": 48,
          "title": "ut voluptatem illum ea doloribus itaque eos",
          "body": "voluptates quo voluptatem facilis iure occaecati\nvel assumenda rerum officia et\nillum perspiciatis ab deleniti\nlaudantium repellat ad ut et autem reprehenderit"
        },
        {
          "userId": 5,
          "id": 49,
          "title": "laborum non sunt aut ut assumenda perspiciatis voluptas",
          "body": "inventore ab sint\nnatus fugit id nulla sequi architecto nihil quaerat\neos tenetur in in eum veritatis non\nquibusdam officiis aspernatur cumque aut commodi aut"
        },
        {
          "userId": 5,
          "id": 50,
          "title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
          "body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
        },
        {
          "userId": 6,
          "id": 51,
          "title": "soluta aliquam aperiam consequatur illo quis voluptas",
          "body": "sunt dolores aut doloribus\ndolore doloribus voluptates tempora et\ndoloremque et quo\ncum asperiores sit consectetur dolorem"
        },
        {
          "userId": 6,
          "id": 52,
          "title": "qui enim et consequuntur quia animi quis voluptate quibusdam",
          "body": "iusto est quibusdam fuga quas quaerat molestias\na enim ut sit accusamus enim\ntemporibus iusto accusantium provident architecto\nsoluta esse reprehenderit qui laborum"
        },
        {
          "userId": 6,
          "id": 53,
          "title": "ut quo aut ducimus alias",
          "body": "minima harum praesentium eum rerum illo dolore\nquasi exercitationem rerum nam\nporro quis neque quo\nconsequatur minus dolor quidem veritatis sunt non explicabo similique"
        },
        {
          "userId": 6,
          "id": 54,
          "title": "sit asperiores ipsam eveniet odio non quia",
          "body": "totam corporis dignissimos\nvitae dolorem ut occaecati accusamus\nex velit deserunt\net exercitationem vero incidunt corrupti mollitia"
        },
        {
          "userId": 6,
          "id": 55,
          "title": "sit vel voluptatem et non libero",
          "body": "debitis excepturi ea perferendis harum libero optio\neos accusamus cum fuga ut sapiente repudiandae\net ut incidunt omnis molestiae\nnihil ut eum odit"
        },
        {
          "userId": 6,
          "id": 56,
          "title": "qui et at rerum necessitatibus",
          "body": "aut est omnis dolores\nneque rerum quod ea rerum velit pariatur beatae excepturi\net provident voluptas corrupti\ncorporis harum reprehenderit dolores eligendi"
        },
        {
          "userId": 6,
          "id": 57,
          "title": "sed ab est est",
          "body": "at pariatur consequuntur earum quidem\nquo est laudantium soluta voluptatem\nqui ullam et est\net cum voluptas voluptatum repellat est"
        },
        {
          "userId": 6,
          "id": 58,
          "title": "voluptatum itaque dolores nisi et quasi",
          "body": "veniam voluptatum quae adipisci id\net id quia eos ad et dolorem\naliquam quo nisi sunt eos impedit error\nad similique veniam"
        },
        {
          "userId": 6,
          "id": 59,
          "title": "qui commodi dolor at maiores et quis id accusantium",
          "body": "perspiciatis et quam ea autem temporibus non voluptatibus qui\nbeatae a earum officia nesciunt dolores suscipit voluptas et\nanimi doloribus cum rerum quas et magni\net hic ut ut commodi expedita sunt"
        },
        {
          "userId": 6,
          "id": 60,
          "title": "consequatur placeat omnis quisquam quia reprehenderit fugit veritatis facere",
          "body": "asperiores sunt ab assumenda cumque modi velit\nqui esse omnis\nvoluptate et fuga perferendis voluptas\nillo ratione amet aut et omnis"
        },
        {
          "userId": 7,
          "id": 61,
          "title": "voluptatem doloribus consectetur est ut ducimus",
          "body": "ab nemo optio odio\ndelectus tenetur corporis similique nobis repellendus rerum omnis facilis\nvero blanditiis debitis in nesciunt doloribus dicta dolores\nmagnam minus velit"
        },
        {
          "userId": 7,
          "id": 62,
          "title": "beatae enim quia vel",
          "body": "enim aspernatur illo distinctio quae praesentium\nbeatae alias amet delectus qui voluptate distinctio\nodit sint accusantium autem omnis\nquo molestiae omnis ea eveniet optio"
        },
        {
          "userId": 7,
          "id": 63,
          "title": "voluptas blanditiis repellendus animi ducimus error sapiente et suscipit",
          "body": "enim adipisci aspernatur nemo\nnumquam omnis facere dolorem dolor ex quis temporibus incidunt\nab delectus culpa quo reprehenderit blanditiis asperiores\naccusantium ut quam in voluptatibus voluptas ipsam dicta"
        },
        {
          "userId": 7,
          "id": 64,
          "title": "et fugit quas eum in in aperiam quod",
          "body": "id velit blanditiis\neum ea voluptatem\nmolestiae sint occaecati est eos perspiciatis\nincidunt a error provident eaque aut aut qui"
        },
        {
          "userId": 7,
          "id": 65,
          "title": "consequatur id enim sunt et et",
          "body": "voluptatibus ex esse\nsint explicabo est aliquid cumque adipisci fuga repellat labore\nmolestiae corrupti ex saepe at asperiores et perferendis\nnatus id esse incidunt pariatur"
        },
        {
          "userId": 7,
          "id": 66,
          "title": "repudiandae ea animi iusto",
          "body": "officia veritatis tenetur vero qui itaque\nsint non ratione\nsed et ut asperiores iusto eos molestiae nostrum\nveritatis quibusdam et nemo iusto saepe"
        },
        {
          "userId": 7,
          "id": 67,
          "title": "aliquid eos sed fuga est maxime repellendus",
          "body": "reprehenderit id nostrum\nvoluptas doloremque pariatur sint et accusantium quia quod aspernatur\net fugiat amet\nnon sapiente et consequatur necessitatibus molestiae"
        },
        {
          "userId": 7,
          "id": 68,
          "title": "odio quis facere architecto reiciendis optio",
          "body": "magnam molestiae perferendis quisquam\nqui cum reiciendis\nquaerat animi amet hic inventore\nea quia deleniti quidem saepe porro velit"
        },
        {
          "userId": 7,
          "id": 69,
          "title": "fugiat quod pariatur odit minima",
          "body": "officiis error culpa consequatur modi asperiores et\ndolorum assumenda voluptas et vel qui aut vel rerum\nvoluptatum quisquam perspiciatis quia rerum consequatur totam quas\nsequi commodi repudiandae asperiores et saepe a"
        },
        {
          "userId": 7,
          "id": 70,
          "title": "voluptatem laborum magni",
          "body": "sunt repellendus quae\nest asperiores aut deleniti esse accusamus repellendus quia aut\nquia dolorem unde\neum tempora esse dolore"
        },
        {
          "userId": 8,
          "id": 71,
          "title": "et iusto veniam et illum aut fuga",
          "body": "occaecati a doloribus\niste saepe consectetur placeat eum voluptate dolorem et\nqui quo quia voluptas\nrerum ut id enim velit est perferendis"
        },
        {
          "userId": 8,
          "id": 72,
          "title": "sint hic doloribus consequatur eos non id",
          "body": "quam occaecati qui deleniti consectetur\nconsequatur aut facere quas exercitationem aliquam hic voluptas\nneque id sunt ut aut accusamus\nsunt consectetur expedita inventore velit"
        },
        {
          "userId": 8,
          "id": 73,
          "title": "consequuntur deleniti eos quia temporibus ab aliquid at",
          "body": "voluptatem cumque tenetur consequatur expedita ipsum nemo quia explicabo\naut eum minima consequatur\ntempore cumque quae est et\net in consequuntur voluptatem voluptates aut"
        },
        {
          "userId": 8,
          "id": 74,
          "title": "enim unde ratione doloribus quas enim ut sit sapiente",
          "body": "odit qui et et necessitatibus sint veniam\nmollitia amet doloremque molestiae commodi similique magnam et quam\nblanditiis est itaque\nquo et tenetur ratione occaecati molestiae tempora"
        },
        {
          "userId": 8,
          "id": 75,
          "title": "dignissimos eum dolor ut enim et delectus in",
          "body": "commodi non non omnis et voluptas sit\nautem aut nobis magnam et sapiente voluptatem\net laborum repellat qui delectus facilis temporibus\nrerum amet et nemo voluptate expedita adipisci error dolorem"
        },
        {
          "userId": 8,
          "id": 76,
          "title": "doloremque officiis ad et non perferendis",
          "body": "ut animi facere\ntotam iusto tempore\nmolestiae eum aut et dolorem aperiam\nquaerat recusandae totam odio"
        },
        {
          "userId": 8,
          "id": 77,
          "title": "necessitatibus quasi exercitationem odio",
          "body": "modi ut in nulla repudiandae dolorum nostrum eos\naut consequatur omnis\nut incidunt est omnis iste et quam\nvoluptates sapiente aliquam asperiores nobis amet corrupti repudiandae provident"
        },
        {
          "userId": 8,
          "id": 78,
          "title": "quam voluptatibus rerum veritatis",
          "body": "nobis facilis odit tempore cupiditate quia\nassumenda doloribus rerum qui ea\nillum et qui totam\naut veniam repellendus"
        },
        {
          "userId": 8,
          "id": 79,
          "title": "pariatur consequatur quia magnam autem omnis non amet",
          "body": "libero accusantium et et facere incidunt sit dolorem\nnon excepturi qui quia sed laudantium\nquisquam molestiae ducimus est\nofficiis esse molestiae iste et quos"
        },
        {
          "userId": 8,
          "id": 80,
          "title": "labore in ex et explicabo corporis aut quas",
          "body": "ex quod dolorem ea eum iure qui provident amet\nquia qui facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero fugit rerum sint sunt excepturi provident"
        },
        {
          "userId": 9,
          "id": 81,
          "title": "tempora rem veritatis voluptas quo dolores vero",
          "body": "facere qui nesciunt est voluptatum voluptatem nisi\nsequi eligendi necessitatibus ea at rerum itaque\nharum non ratione velit laboriosam quis consequuntur\nex officiis minima doloremque voluptas ut aut"
        },
        {
          "userId": 9,
          "id": 82,
          "title": "laudantium voluptate suscipit sunt enim enim",
          "body": "ut libero sit aut totam inventore sunt\nporro sint qui sunt molestiae\nconsequatur cupiditate qui iste ducimus adipisci\ndolor enim assumenda soluta laboriosam amet iste delectus hic"
        },
        {
          "userId": 9,
          "id": 83,
          "title": "odit et voluptates doloribus alias odio et",
          "body": "est molestiae facilis quis tempora numquam nihil qui\nvoluptate sapiente consequatur est qui\nnecessitatibus autem aut ipsa aperiam modi dolore numquam\nreprehenderit eius rem quibusdam"
        },
        {
          "userId": 9,
          "id": 84,
          "title": "optio ipsam molestias necessitatibus occaecati facilis veritatis dolores aut",
          "body": "sint molestiae magni a et quos\neaque et quasi\nut rerum debitis similique veniam\nrecusandae dignissimos dolor incidunt consequatur odio"
        },
        {
          "userId": 9,
          "id": 85,
          "title": "dolore veritatis porro provident adipisci blanditiis et sunt",
          "body": "similique sed nisi voluptas iusto omnis\nmollitia et quo\nassumenda suscipit officia magnam sint sed tempora\nenim provident pariatur praesentium atque animi amet ratione"
        },
        {
          "userId": 9,
          "id": 86,
          "title": "placeat quia et porro iste",
          "body": "quasi excepturi consequatur iste autem temporibus sed molestiae beatae\net quaerat et esse ut\nvoluptatem occaecati et vel explicabo autem\nasperiores pariatur deserunt optio"
        },
        {
          "userId": 9,
          "id": 87,
          "title": "nostrum quis quasi placeat",
          "body": "eos et molestiae\nnesciunt ut a\ndolores perspiciatis repellendus repellat aliquid\nmagnam sint rem ipsum est"
        },
        {
          "userId": 9,
          "id": 88,
          "title": "sapiente omnis fugit eos",
          "body": "consequatur omnis est praesentium\nducimus non iste\nneque hic deserunt\nvoluptatibus veniam cum et rerum sed"
        },
        {
          "userId": 9,
          "id": 89,
          "title": "sint soluta et vel magnam aut ut sed qui",
          "body": "repellat aut aperiam totam temporibus autem et\narchitecto magnam ut\nconsequatur qui cupiditate rerum quia soluta dignissimos nihil iure\ntempore quas est"
        },
        {
          "userId": 9,
          "id": 90,
          "title": "ad iusto omnis odit dolor voluptatibus",
          "body": "minus omnis soluta quia\nqui sed adipisci voluptates illum ipsam voluptatem\neligendi officia ut in\neos soluta similique molestias praesentium blanditiis"
        },
        {
          "userId": 10,
          "id": 91,
          "title": "aut amet sed",
          "body": "libero voluptate eveniet aperiam sed\nsunt placeat suscipit molestias\nsimilique fugit nam natus\nexpedita consequatur consequatur dolores quia eos et placeat"
        },
        {
          "userId": 10,
          "id": 92,
          "title": "ratione ex tenetur perferendis",
          "body": "aut et excepturi dicta laudantium sint rerum nihil\nlaudantium et at\na neque minima officia et similique libero et\ncommodi voluptate qui"
        },
        {
          "userId": 10,
          "id": 93,
          "title": "beatae soluta recusandae",
          "body": "dolorem quibusdam ducimus consequuntur dicta aut quo laboriosam\nvoluptatem quis enim recusandae ut sed sunt\nnostrum est odit totam\nsit error sed sunt eveniet provident qui nulla"
        },
        {
          "userId": 10,
          "id": 94,
          "title": "qui qui voluptates illo iste minima",
          "body": "aspernatur expedita soluta quo ab ut similique\nexpedita dolores amet\nsed temporibus distinctio magnam saepe deleniti\nomnis facilis nam ipsum natus sint similique omnis"
        },
        {
          "userId": 10,
          "id": 95,
          "title": "id minus libero illum nam ad officiis",
          "body": "earum voluptatem facere provident blanditiis velit laboriosam\npariatur accusamus odio saepe\ncumque dolor qui a dicta ab doloribus consequatur omnis\ncorporis cupiditate eaque assumenda ad nesciunt"
        },
        {
          "userId": 10,
          "id": 96,
          "title": "quaerat velit veniam amet cupiditate aut numquam ut sequi",
          "body": "in non odio excepturi sint eum\nlabore voluptates vitae quia qui et\ninventore itaque rerum\nveniam non exercitationem delectus aut"
        },
        {
          "userId": 10,
          "id": 97,
          "title": "quas fugiat ut perspiciatis vero provident",
          "body": "eum non blanditiis soluta porro quibusdam voluptas\nvel voluptatem qui placeat dolores qui velit aut\nvel inventore aut cumque culpa explicabo aliquid at\nperspiciatis est et voluptatem dignissimos dolor itaque sit nam"
        },
        {
          "userId": 10,
          "id": 98,
          "title": "laboriosam dolor voluptates",
          "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores"
        },
        {
          "userId": 10,
          "id": 99,
          "title": "temporibus sit alias delectus eligendi possimus magni",
          "body": "quo deleniti praesentium dicta non quod\naut est molestias\nmolestias et officia quis nihil\nitaque dolorem quia"
        },
        {
          "userId": 10,
          "id": 100,
          "title": "at nam consequatur ea labore ea harum",
          "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
        }
      ]
    }

运行

json-server  posts.json

浏览器打开index.html文件进行增删改查

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

<!doctype html>
    <html lang="en">
    
    <head>
        <title>JavaScript XHR using JSONPlaceholder API</title>
    
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
    </head>
    
    <body class="bg-light">
    
        <div class="container my-5">
            <div class="row">
                <div class="col">
                    <h3>JavaScript XHR using JSONPlaceholder API</h3>
                    <hr>
    
                    
                    <button id="btnAdd" type="button" class="btn btn-primary btn-sm float-right">
                        <i class="fa fa-plus pr-1"></i>Add
                    </button>
    
                    <h5 class="mb-3">Posts</h5>
    
                    
                    <div id="dvMessage" class="alert d-none" role="alert"></div>
    
                    
                    <form id="frmPost" class="card mb-3 d-none">
                        <div class="card-body">
                            <h5 id="frmTitle" class="card-title">Add Post</h5>
                            <div class="form-group">
                                <input type="text" name="txtTitle" id="txtTitle" class="form-control" placeholder="Enter title">
                            </div>
                            <div class="form-group">
                                <textarea rows="3" name="txtBody" id="txtBody" class="form-control"
                                    placeholder="Enter body"></textarea>
                            </div>
                            <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
                            <button type="reset" class="btn btn-secondary">Reset</button>
                            <button id="btnCancel" type="button" class="btn btn-light">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
    
            
            <div id="dvList" class="row"></div>
        </div>
    
        
        <script src="js/index.js"></script>
    
    </body>
    
    </html>

// ui elements
    const dvList = document.querySelector('#dvList');
    const dvMessage = document.querySelector('#dvMessage');
    const frmTitle = document.querySelector('#frmTitle');
    const frmPost = document.querySelector('#frmPost');
    const btnAdd = document.querySelector('#btnAdd');
    const btnSubmit = document.querySelector('#btnSubmit');
    const btnCancel = document.querySelector('#btnCancel');
    const txtTitle = document.querySelector('#txtTitle');
    const txtBody = document.querySelector('#txtBody');
    
    // declarations
    const apiUrl = 'http://localhost:8080/api/posts';
    const timeout = 1500;
    const messages = {
        loading: 'Loading please wait...',
        error: 'Server is not able to process your request.',
        submit: 'Post created successfully',
        update: 'Post updated successfully',
        delete: 'Post deleted successfully'
    };
    let editId = 0;
    let incrementId = 0;
    
    // events
    window.addEventListener('load', onLoad);
    btnAdd.addEventListener('click', onAddClick);
    frmPost.addEventListener('submit', onSubmitClick);
    btnCancel.addEventListener('click', onCancelClick);
    
    // handlers
    function onLoad() {
    
        dvMessage.textContent = messages.loading;
        dvMessage.className = 'alert alert-info';
    
        const xhr = new XMLHttpRequest();
        xhr.open('GET', apiUrl, true);
        xhr.onload = () => {
            if (xhr.status !== 200) {
                dvMessage.textContent = messages.error;
                dvMessage.className = 'alert alert-danger';
                return;
            }
    
            const posts = JSON.parse(xhr.responseText);
            posts.forEach(post => {
                dvList.innerHTML += `
                    <div class="col-sm-6 mb-3 post-${post.id}">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">${post.title}</h5>
                                <p class="card-text">${post.body}</p>
                            </div>
                            <div class="card-footer">
                                <button type="button" class="btn btn-light btn-sm btn-edit" onclick="onEditClick(${post.id})"><i class="fa fa-pencil pr-1"></i>Edit</button>
                                <button type="button" class="btn btn-light btn-sm btn-delete" onclick="onDeleteClick(${post.id})"><i class="fa fa-trash pr-1"></i>Delete</button>
                            </div>
                        </div>
                    </div>
                `;
            });
            dvMessage.className = 'alert d-none';
        };
        xhr.onerror = () => {
            dvMessage.textContent = messages.error;
            dvMessage.className = 'alert alert-danger';
        };
        xhr.send();
    }
    function onSubmitClick(e) {
        e.preventDefault();
    
        // validate inputs
        if (txtTitle.value === '' || txtBody.value === '') {
            dvMessage.textContent = 'Please fill the form properly';
            dvMessage.className = 'alert alert-danger';
            setTimeout(() => dvMessage.className = 'alert d-none', 2000);
            return;
        } else {
            dvMessage.textContent = '';
            dvMessage.className = 'alert d-none';
        }
    
        // message loading
        dvMessage.textContent = messages.loading;
        dvMessage.className = 'alert alert-info';
    
        // disable buttons
        btnSubmit.setAttribute('disabled', true);
        btnCancel.setAttribute('disabled', true);
    
        if (editId === 0) {
    
            // add new post
    
            const data = JSON.stringify({
                title: txtTitle.value,
                body: txtBody.value,
                userId: 1
            });
            const xhr = new XMLHttpRequest();
            xhr.open('POST', apiUrl, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = () => {
                if (xhr.status !== 201) {
                    dvMessage.textContent = messages.error;
                    dvMessage.className = 'alert alert-danger';
                    return;
                }
    
                const post = JSON.parse(xhr.responseText);
                dvMessage.textContent = messages.submit;
                dvMessage.className = 'alert alert-success';
    
                // increment post id in order to make them unique
                post.id += incrementId++;
    
                dvList.innerHTML = `
                    <div class="col-sm-6 mb-3 post-${post.id}">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">${post.title}</h5>
                                <p class="card-text">${post.body}</p>
                            </div>
                            <div class="card-footer">
                                <button type="button" class="btn btn-light btn-sm btn-edit" onclick="onEditClick(${post.id})"><i class="fa fa-pencil pr-1"></i>Edit</button>
                                <button type="button" class="btn btn-light btn-sm btn-delete" onclick="onDeleteClick(${post.id})"><i class="fa fa-trash pr-1"></i>Delete</button>
                            </div>
                        </div>
                    </div>` + dvList.innerHTML;
    
                setTimeout(() => onCancelClick(), timeout);
            };
            xhr.onerror = () => {
                dvMessage.textContent = messages.error;
                dvMessage.className = 'alert alert-danger';
    
                onCancelClick();
            };
            xhr.send(data);
        } else {
    
            // edit post
    
            const data = JSON.stringify({
                id: `${editId}`,
                title: txtTitle.value,
                body: txtBody.value,
                userId: 1
            });
            const xhr = new XMLHttpRequest();
            xhr.open('PUT', `${apiUrl}/${editId}`, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = () => {
                if (xhr.status !== 200) {
                    dvMessage.textContent = messages.error;
                    dvMessage.className = 'alert alert-danger';
                    return;
                }
    
                const post = JSON.parse(xhr.responseText);
                dvMessage.textContent = messages.update;
                dvMessage.className = 'alert alert-success';
    
                const title = document.querySelector(`.post-${editId} .card-title`);
                const body = document.querySelector(`.post-${editId} .card-text`);
    
                title.textContent = post.title;
                body.textContent = post.body;
    
                setTimeout(() => onCancelClick(), timeout);
            };
            xhr.onerror = () => {
                dvMessage.textContent = messages.error;
                dvMessage.className = 'alert alert-danger';
    
                onCancelClick();
            };
            xhr.send(data);
        }
    }
    function onAddClick() {
        frmPost.classList.remove('d-none');
        frmTitle.textContent = 'Add Post';
        btnAdd.setAttribute('disabled', true);
        document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
            element.setAttribute('disabled', true);
        });
    }
    function onCancelClick() {
        frmPost.classList.add('d-none');
        dvMessage.className = 'alert d-none';
        txtTitle.value = '';
        txtBody.value = '';
        editId = 0;
        btnAdd.removeAttribute('disabled');
        btnSubmit.removeAttribute('disabled');
        btnCancel.removeAttribute('disabled');
        document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
            element.removeAttribute('disabled');
        });
    }
    function onEditClick(id) {
        const title = document.querySelector(`.post-${id} .card-title`).textContent;
        const body = document.querySelector(`.post-${id} .card-text`).textContent;
    
        editId = id;
        txtTitle.value = title;
        txtBody.value = body;
    
        frmPost.classList.remove('d-none');
        frmTitle.textContent = 'Edit Post';
        btnAdd.setAttribute('disabled', true);
        document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
            element.setAttribute('disabled', true);
        });
        scrollTo({top: 0});
    }
    function onDeleteClick(id) {
        const post = document.querySelector(`.post-${id}`);
        const title = document.querySelector(`.post-${id} .card-title`).textContent;
        const result = confirm(`Are you sure you want to delete "${title}"?`);
        if (result) {
            // message loading
            dvMessage.textContent = messages.loading;
            dvMessage.className = 'alert alert-info';
    
            // disable all buttons
            document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
                element.setAttribute('disabled', true);
            });
    
            const xhr = new XMLHttpRequest();
            xhr.open('DELETE', `${apiUrl}/${id}`, true);
            xhr.onload = () => {
                if (xhr.status !== 200) {
                    dvMessage.textContent = messages.error;
                    dvMessage.className = 'alert alert-danger';
                    return;
                }
    
                post.remove();
                dvMessage.textContent = messages.delete;
                dvMessage.className = 'alert alert-success';
    
                // enable all buttons
                document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
                    element.removeAttribute('disabled');
                });
    
                setTimeout(() => {
                    dvMessage.textContent = '';
                    dvMessage.className = 'alert d-none';
                }, timeout);
            };
            xhr.onerror = () => {
                dvMessage.textContent = messages.error;
                dvMessage.className = 'alert alert-danger';
    
                // enable all buttons
                document.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {
                    element.removeAttribute('disabled');
                });
            };
            xhr.send();
        }
    }

[Link 1]: https://jsonplaceholder.typicode.com/
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
[Link 3]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget
[Link 4]: https://github.com/ZakiMohammed/javascript-xhr-jsonplaceholder/archive/master.zip
[Git]: https://github.com/ZakiMohammed/javascript-xhr-jsonplaceholder
[https_jsonplaceholder.typicode.com_posts]: https://jsonplaceholder.typicode.com/posts
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1cae95fd781c49ef8d8be61f56f538f3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16