AJAX CRUD
By now, we've seen AJAX in action. In this lesson, we'll use it to request CRUD actions from an API, using GET, POST, PUT and DELETE.
To follow along, you can fork/clone the Peanuts-api repository on Github or you can hit the button below to deploy a working version to Heroku.
Be sure to make a note of your heroku app url
GET
Let's try out some GET requests on our peanuts API.
var API_PATH = "https://[your-peanut-api-name].herokuapp.com"
$.get(API_PATH + '/peanuts')
.done(function(response) {
console.log('success listing peanuts', data)
}).fail(function () {
console.log('error listing peanuts')
})
Remember that this is the same as using the AJAX method and specifying the method.
$.ajax({
url: API_PATH + '/peanuts',
type: 'GET'
}).done(function (data) {
console.log('success listing peanuts', data)
}).fail(function () {
console.log('error listing peanuts')
})
POST
To create a record, we can just switch to making a POST request and include the data we want to send.
jQuery / JavaScript
$.ajax({
url: API_PATH + '/peanuts',
type: 'POST',
data: peanutData
}).done(function (data) {
console.log('success adding peanut')
}).fail(function () {
console.log('error adding peanut')
})
We can capture this data from a form if we like.
HTML
<form id="add-peanut">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="cost" placeholder="Cost" required>
<button type="submit">Add</button>
</form>
When the form is submitted, we want to intercept the result and make an AJAX request to the server. When we get the response, we can update the DOM with the new entry or we could reload the list by listing all peanuts again.
jQuery / JavaScript
$('#add-peanut').submit(function (event) {
event.preventDefault() // stop the browser reloading
var data = $('#add-peanut').serialize() // extract the data from the form
$('#add-peanut').trigger('reset') // clear the form
//TODO. AJAX stuff
})
DELETE
Delete should be used to delete an existing item. A delete request contains no payload (req.body) and no query string (req.query). The only data is expressed via a URL parameter which matches the item's name (req.params.name).
HTML
<a href="/peanuts/5" class="delete-link">Delete Peanut</a>
Without JavaScript, this would link to GET /peanuts/5 which would simply display the team at that route. However, we can use JavaScript to override the default behavior and send the request with the DELETE verb.
jQuery / JavaScript
$('.delete-link').on ('click', function (e) {
e.preventDefault();
let linkElem = $(this);
let peanutUrl = linkElem.attr('href');
$.ajax({
method: 'DELETE',
url: peanutUrl
}).done(function (data) {
console.log(data);
// TODO. update the DOM
});
});
PUT
Put should be used to update an existing item, we'll most likely use a form to do this.
HTML
<form action="/peanuts/5" class="update-peanut">
<input type="text" name="name" placeholder="Name" value="Previous Name" required>
<input type="text" name="cost" placeholder="Cost" value="Previous Cost" required>
<button type="submit">Update</button>
</form>
Without JavaScript this form would submit as a GET request. Now we need to override this default behavior to initiate a PUT via AJAX.
jQuery / JavaScript
$('.update-peanut').on ('submit', function (e) {
e.preventDefault();
let formElement = $(this);
let peanutUrl = formElement.attr('action');
let peanutData = formElement.serialize();
$.ajax({
method: 'PUT',
url: peanutUrl,
data: peanutData
}).done(function (data) {
console.log(data);
// TODO. stuff when the PUT action is complete
});
});
Additional Resources
Check out the example Peanuts-client repository on Github for a complete example.