API ENDPOINT: https://jsonplaceholder.typicode.com/
Available API Routes
GET | /posts/1
GET | /posts/1/comments
GET | /comments?postId=1
POST | /posts
PUT | /posts/1
PATCH | /posts/1
DELETE | /posts/1
Install Alpine.js or Reference CDN Links
First, you will have to install Alpine.js to your project using NPM or by including the CDN link within your head tag.
npm install alpinejs
<html> <head> <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> </head> <body> <!-- your code here --> </body> </html>
Making a GET Request in Alpine.js
Let's start by making a GET request in Alpine.js and you can perform the ajax using "Javascript Fetch API". By default, you can create an object within the "x-data" attribute and then specify the "posts" key which will store the array of posts and then have another function to retrieve the posts.
To perform the Ajax in Alpine.js you can make use "fetch()" function or "Axios" if you have it installed on your project. By using the "x-init", it will allow you to hook into the initialization phase of any element in Alpine hence you can call the method that you have defined on the data.
<div x-data="{ posts: {}, async retrievePosts() { this.posts = await (await fetch('https://jsonplaceholder.typicode.com/posts')).json(); // log out all the posts to the console console.log(this.posts); } }" x-init="retrievePosts"> </div>

Making a POST Request in Alpine.js
To perform a POST request which is creating a new resource, you can write your code like the following. Since by default a POST request has a body, you can structure your code to pass in the data by stringifying the object like below. Upon performing the ajax it will return back the data and in this case, we can see it directly from the console logger.
<div x-data="{ newpost: {}, async createPost() { this.newpost = await (await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.newpost); }, }" x-init="retrievePosts" ></div>

Making a PUT Request in Alpine.js
To perform an update request you can use the PUT method and then specify the data to update. Do pay attention to the URL itself where the posts ID is set to 1 and the value of the request body.
<div x-data="{ updatedpost: {}, async updatePost() { this.updatedpost = await (await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'PUT', body: JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.updatedpost); }, }" x-init="updatePost" ></div>

Making a PATCH Request in Alpine.js
To update a resource you can use the PATCH method and just like the PUT request, the URL will require to have the ID of the resource which in this case is 1.
<div x-data="{ patchedpost: {}, async patchPost() { this.patchedpost = await (await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'PATCH', body: JSON.stringify({ title: 'foo', }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.patchedpost); }, }" x-init="patchPost" ></div>

Making a DELETE Request in Alpine.js
To delete a request you can use the "DELETE" method and then the resource will be deleted. Do note that the resource will not be really updated on the server but it will be faked as if.
<div x-data="{ async deletePost() { let res = await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'DELETE', }); console.log(res); } }" x-init="deletePost" ></div>

Full Code Example
The code above can be written in one Alpine.js code and this is how the full code looks like. Do note that you can extract out the "data" object into Alpine global "Alpine.data()" function so that it's reusable and be compiled using your build tools.
<div x-data="{ newpost: {}, updatedpost: {}, patchedpost: {}, posts: [], async retrievePosts() { this.posts = await (await fetch('https://jsonplaceholder.typicode.com/posts')).json(); console.log(this.posts); }, async createPost() { this.newpost = await (await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.newpost); }, async updatePost() { this.updatedpost = await (await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'PUT', body: JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.updatedpost); }, async patchPost() { this.patchedpost = await (await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'PATCH', body: JSON.stringify({ title: 'foo', }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })).json(); console.log(this.patchedpost); }, async deletePost() { let res = await fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'DELETE', }); console.log(res); } }" x-init="retrievePosts" ></div>