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

有时，了解地面上的事情是如何发生的非常重要。本文将讨论如何借助最喜爱的 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 保存用户、帖子、评论、相册、照片和待办事项端点。这些数据相互关联，帖子、相册和待办事项链接到用户，照片链接到相册，评论链接到帖子。

users
|-- posts|-- comments
|-- albums|-- photos
|-- todos

这些端点的 URL 如下：

users:
https://jsonplaceholder.typicode.com/usersposts and comments:
https://jsonplaceholder.typicode.com/posts
https://jsonplaceholder.typicode.com/commentsalbums and photos:
https://jsonplaceholder.typicode.com/albums
https://jsonplaceholder.typicode.com/photostodos:
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 的更多详细信息，请单击此处访问该网站。

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 事件如何在调用的不同阶段触发：

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {if (this.readyState === 0) {console.log('request not initialized: ', this.readyState);}if (this.readyState === 1) {console.log('server connection established: ', this.readyState);}if (this.readyState === 2) {console.log('request received: ', this.readyState);}if (this.readyState === 3) {console.log('processing request: ', this.readyState);}if (this.readyState === 4) {console.log('request finished and response is ready: ', this.readyState);}
};
xhr.open('GET', apiUrl, true);
xhr.send();

最初，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 状态代码及其含义的完整列表在此处列出。

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

onload
onerror
onprogress
onabort

带有 JSONPlaceholder 的 XHR

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

阅读帖子 [获取]

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

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';const xhr = new XMLHttpRequest();
xhr.onload = () => {if (xhr.status === 200) {const posts = JSON.parse(xhr.responseText);console.log(posts);} else {console.log('Server response:', xhr.status);}
};
xhr.onerror = () => {console.log('An error occurred, not able to process the request.');
};
xhr.open('GET', apiUrl, true);
xhr.send();

当从服务器接收到响应时调用 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 调用（创建操作）的代码逻辑。

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';const data = JSON.stringify({title: 'foo',body: 'bar',userId: 1
});
const xhr = new XMLHttpRequest();
xhr.onload = () => {if (xhr.status === 201) {const post = JSON.parse(xhr.responseText);console.log(post);} else {console.log('Server response:', xhr.status);}
};
xhr.onerror = () => {console.log('An error occurred, not able to process the request.');
};
xhr.open('POST', apiUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data);

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 这不会'

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';const data = JSON.stringify({id: 1,title: 'foo',body: 'bar',userId: 1
});
const xhr = new XMLHttpRequest();
xhr.onload = () => {if (xhr.status === 200) {const post = JSON.parse(xhr.responseText);console.log(post);} else {console.log('Server response:', xhr.status);}
};
xhr.onerror = () => {console.log('An error occurred, not able to process the request.');
};
xhr.open('PUT', `${apiUrl}/1`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data);

删除帖子[删除]

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

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';const xhr = new XMLHttpRequest();
xhr.onload = () => {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText));} else {console.log('Server response:', xhr.status);}
};
xhr.onerror = () => {
};
xhr.open('DELETE', `${apiUrl}/101`, true);
xhr.send();

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

Git 存储库

查看此项目的 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下载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文件进行增删改查

<!doctype html>
<html lang="en"><head><title>JavaScript XHR using JSONPlaceholder API</title><!-- meta --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- css --><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><!-- add new post --><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><!-- alert messages --><div id="dvMessage" class="alert d-none" role="alert"></div><!-- post form --><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><!-- post list --><div id="dvList" class="row"></div></div><!-- js --><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 inputsif (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 loadingdvMessage.textContent = messages.loading;dvMessage.className = 'alert alert-info';// disable buttonsbtnSubmit.setAttribute('disabled', true);btnCancel.setAttribute('disabled', true);if (editId === 0) {// add new postconst 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 uniquepost.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 postconst 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 loadingdvMessage.textContent = messages.loading;dvMessage.className = 'alert alert-info';// disable all buttonsdocument.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 buttonsdocument.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 buttonsdocument.querySelectorAll('.btn-edit, .btn-delete').forEach(element => {element.removeAttribute('disabled');});};xhr.send();}
}