DEV Community

gyi2521
gyi2521

Posted on • Edited on

12

AJAX - GET, POST, PUT,and DELETE

Hi everyone, I've been thinking about writing on how to make AJAX call immediately after I wrote the blog, "What is AJAX" [https://dev.to/gyi2521/what-is-ajax-34c2], about a month ago; however, I've been busy with my first group project, "InstagramClone", from my Boot-camp class, so here I am.. writing the second part of AJAX a month later..;)
Good thing is that I can use the AJAX call examples from my project.

In our "InstagramClone" project, we used jQuery's AJAX "GET" method on the client side to retrieve photos from the back-end.

 $.ajax({ url: 'api/photos', method: 'GET' })
            .then(function (data) {
                let content = '';
                if (data != '') {
                   data.forEach(e => {
                   content += `some code`;
 code continues...

Our GET method starts with '$.ajax' followed by an object with two properties which are url and method. The Url field is populated with the API address that will provide the desired data from the back-end and the method field is populated with 'GET'. The next line, '.then(function(data))' is the process that executes once the data has been retrieved from the ajax call. In our case, we iterated through the data and displayed the photos on the screen.

Now, lets look at AJAX POST(=create new) method. The following is the code we used to add a comment to a photo.

$.ajax({ url: '/api/comments', method: 'POST', data:allComment})
            .then(function () {
                $(`#${photoid}_divForComments`).append($(`            
                Instagram_Clone ${theComment}`));
            });

The code is similar to GET method but we populated "POST" for the method field and also added the data that contains newly created user comment.

The PUT(=update) method, is really identical to POST method as you can see below:

$.ajax({ url: '/api/comments', method: 'PUT', data:likes})
            .then(function() {
                some code...
            });

For the DELETE method, we are passing in photoId to delete.

        $.ajax({ url: `/api/photo/${$(this).attr('photoId')}`, method: "DELETE" })
            .then(function (data) {
                some code...
            })
            .catch(function (err) {
                some code...
            });

In above example, we just added '.catch(function (err)' to get the error message if there is any, and you can add this to all other calls as well.

With AJAX, we can simply update the parts of a web page without reloading the whole page, and this makes the process much faster and responsive for users.

Thanks for reading!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (1)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay