PUT Data to API

Published on: September 16, 2018

Welcome to the 17th Easy jQuery tutorial! We are still on AJAX and today we cover the HTTP PUT method with $.ajax()

PUT allows you to send data to an API end point as an Update. This is the U in CRUD.  

PUT is much safer than GETbecause no data is exposed on the browser. And it's safer than POST because you won't accidentally create a new record. This will only update if a record already exists.

Here's a quick example of the HTTP PUT used in the video:

    
     $.ajax({
        url: 'http://localhost:3000/api/tutorials/5b84a6be8ccb4f18f85cdd04',
        method: 'PUT',
        dataType: 'json',
        data: {
            tutorialNumber: 7,
            title: 'Changed Tutorial number last',
            author: 'Nazmus',
            type: 'MEAN'
        },
        success: function(data) {
            console.log(data);
            getTutorials();
        }
    });

The properties of $.ajax() is the same as GETting data. The only difference is that the method has been changed to POST, and we are sending more data back to write to the database. 

Check out the AJAX GET tutorial for an explanation of all the properties.

The backend API was created using ExpressJS. I do not go into how to create that (not yet!). 

I hope you enjoyed this tutorial! Please feel free to ask questions below or just leave your comments.

Since this tutorial was done in Brackets, there is no JS Fiddle. This description will be updated after the AJAX series has been completed and I've uploaded the files in the resources section below. 

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!

Resources:

You can find the entire HTML and JavaScript files at the following URL: https://www.easyprogramming.net/downloads/jquery/crudApp/

You can get the source HTML out of that page and if you are having trouble finding the JavaScript, find it at the following URL: https://www.easyprogramming.net/downloads/jquery/crudApp/script.js



Comments: