Making AJAX calls using jQuery
Tags: javascript, jquery, ajax
Published: 2019-04-03 11:58:36

---
title: Making AJAX calls using jQuery
published: true
description: Making AJAX calls using jQuery
tags: javascript, jquery, ajax
---

![](https://thepracticaldev.s3.amazonaws.com/i/5bhw48ka5ozwyianiecr.jpg)

_Originally posted on [my blog](http://www.nikola-breznjak.com/blog/javascript/making-ajax-calls-using-jquery/)_

## TL;DR

In this post we'll do everything (and a bit more 😎) we did in the [first post](https://dev.to/hitman666/making-ajax-calls-in-pure-javascript-the-old-way-ed5), but with [jQuery](https://jquery.com/).

## Why is jQuery better?

I prepared [this demo page](http://nikola-breznjak.com/_testings/ajax/test3.html) so that you can test.

You'll remember from the last post that in order to make an AJAX call in pure JavaScript, you have to do something like this:

```
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4){
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};
xhr.open('GET', 'http://nikola-breznjak.com/_testings/ajax/test1.php?ime=Nikola');
xhr.send();
```

Go ahead and run that code on the [demo page](http://nikola-breznjak.com/_testings/ajax/test3.html) in the browser's dev tools Console (consult the [last post](https://dev.to/hitman666/making-ajax-calls-in-pure-javascript-the-old-way-ed5) if you're stuck).

Now, to do the very same thing with jQuery, all you have to do is this:

`$('#result').load('http://nikola-breznjak.com/_testings/ajax/test1.php?ime=Nikola');`

Go ahead and try it in the Console. Change the `ime` parameter, and you'll see that the text on the page will change to `Hello [name]`, where [name] will be the parameter you entered.

> ⚠️ I won't go into the basics of using jQuery, as it's been here for a very long time, and there's a vast amount of tutorials written about it. Start with the [official docs](https://jquery.com/) if you want to learn more.

The important thing to note here is that `.load` must be chained to a so-called jQuery selection, as mentioned in the [.load() documentation](https://api.jquery.com/load/). We loaded the data from the server and placed the returned text into the element with an id `result`.

## Shorthand methods

By looking at the docs, you can see that there are more of these so-called [shorthand methods](https://api.jquery.com/category/ajax/shorthand-methods/) for making AJAX calls, all of which could be done with the most versatile [ajax](https://api.jquery.com/jQuery.ajax/) function.

The example from before could be done using the [get](https://api.jquery.com/jQuery.get/) shorthand method:

```
    var link = 'http://nikola-breznjak.com/_testings/ajax/test1.php';
    var data = {ime:"Nikola"};
    var callback = function(result) {
        $('#result').html(result);
    }
    $.get(link, data, callback);
```

If you don't want to pass any parameters, it gets even simpler:

```
    var link = 'http://nikola-breznjak.com/_testings/ajax/test1.php';
    var callback = function(result) {
        $('#result').html(result);
    }
    $.get(link, callback);
```

## Rewriting the mini project

I prepared the same [demo page](http://nikola-breznjak.com/_testings/ajax/test4.html) as in the previous post, but with jQuery already included so you can test this by just pasting the code below in the Console. I encourage you first to try it yourself and then compare your solution with mine below.

```
var link = 'http://nikola-breznjak.com/_testings/ajax/test2.php';
$.getJSON(link, function(result){
    var oglasiHTML = '';
    $.each(result, function(index, oglas){
        var klasaCijene = '';
        if (oglas.cijena < 100){
            klasaCijene = 'is-success';
        }
        else if (oglas.cijena >= 100 && oglas.cijena < 300){
            klasaCijene = 'is-info';
        }
        else if (oglas.cijena >= 300){
            klasaCijene = 'is-danger';
        }

        oglasiHTML += `
            <div class="columns">
                <div class="column is-one-quarter">
                    <span class="tag ${klasaCijene}">${oglas.cijena}</span>
                </div>
                <div class="column">${oglas.tekst}</div>
            </div>
        `;
    });

    $('#oglasi').html(oglasiHTML);
});
```

There are a few things that I'd like to point out here:

- I used the [getJSON](https://api.jquery.com/jQuery.getJSON/) function to call my API located on the URL that's saved in the `link` variable. This is because I know that this API returns a JSON response (you can check by opening that link in the browser).
- I used the jQuery [each](https://api.jquery.com/each/) function to iterate over the `result`.
- I used the [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to construct the final `oglasiHTML` in a much cleaner way than we did that in the previous post with using concatenation.
- The core logic remained the same as in the first post, with the exception of not having to use the `for` loop and `indexes` to access each element of the array.

## I want more examples

![](https://i.imgur.com/jYSxnG9.jpg)

Say you have [this demo page](http://nikola-breznjak.com/_testings/ajax/test5-email.html), and you need to make the newsletter signup form use AJAX instead of going to a new page when you click the `Subscribe` button. Right now the API (located at http://nikola-breznjak.com/_testings/ajax/email.php) doesn't actually process what you send to it, but try to send data with the request as well for practice.

How would you do it? Where would you start?

Well, here are a few search terms you could Google:

- `form submit jquery`
- `post data`

Again, here's my solution, but I encourage you to try it yourself first.

```
$('form').submit(function(ev){
    ev.preventDefault();
    var url = $(this).attr('action');
    var formData = $(this).serialize();
    $.post(url, formData, function(response){
        $('#newsletter').html('Thank you for subscribing, please check your email.');
    });
});
```

There are a few things that I'd like to point out here:

- I was able to use the `form` selector without any id because it's the only form on the page. If there were more forms on the page, I'd have to distinguish them by using an id (which is always a good practice, even if it's just one form)
- I used jQuery's [submit](https://api.jquery.com/submit/) function to set an event handler that will be executed when the form will be submitted (`Subscribe` button clicked, or ENTER pressed while in one of the fields)
- I used the `ev.preventDefault()` to prevent the form from "doing its thing" and loading the 'email.php' page, as its default behavior
- I used `$(this).attr('action')` to extract the API URL from the form definition it the HTML (feel free to check it out in the element inspector)
- I used `$(this).serialize()` to encode a set of form elements as a string which I then passed to the jQuery [post](https://api.jquery.com/jQuery.post/) shorthand function. This function sends a request to the server using the POST method, which (as we learned in the previous post) is the preferred way of sending some sensitive data that needs to be handled on the server
- I used the [html](https://api.jquery.com/html/) function on a `div` with the id `newsletter` to set its new content

## Can I have one more, please?

Sure, but promise you'll do it yourself first!

> I do 🤞

OK then, let's do this 💪

Here's a new [demo page](http://nikola-breznjak.com/_testings/ajax/test6-slike.html) that you'll use for this example.

> ⚠️ I'm using [Bulma](https://bulma.io/) to make the site look pretty. As their website says:
> 'Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers.'
> I'll just say it's really great and easy to learn, so make sure you check it out.

In this challenge, you have to create a gif search application using the [Giphy Search API](https://developers.giphy.com/). As the docs state, you'll need to get the API key by [creating an app](https://developers.giphy.com/dashboard/?create=true). Once you do that, you'll be able to search their API like, for example, this: `http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC`. You can use this API key, but be sure to create your own if this one gets banned for too many requests 🤦‍

Once you fetch the gifs (or still images if you so choose), show them in the div with a class `result` (yes, class, not id 👍).

Here's the part where you roll up your sleeves, create it, feel proud of yourself 💪, and then come here to check how I did it.

```
$('form').submit(function(ev){
    ev.preventDefault();
    var searchTerm = $('input').val();

    var apiLink = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchTerm;

    var output = '';
    $.getJSON(apiLink, function(images){
        $.each(images.data, function(i, im){
            output += `<img src="${im.images.downsized.url}"/>`;
        });

        $('.result').html(output);
    });
});
```

The only new, and potentially tricky, part here is the traversal of the JSON object that you get back from the API, but with just a bit training, you'll get good at it.

If you open up [this URL](http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=duck) in your browser, you will see this

![](https://i.imgur.com/Dbu9ge8.jpg)

The returned JSON object consists of three properties:

- `data`
- `pagination`
- `meta`

The `data` is an array of objects, and in one of its properties it has an array of `images`. In my example, I choose to display the `downsized` gif by accessing its `url` property.

![](https://i.imgur.com/ZEuMHuw.jpg)

Here's a short gif of this in action:

![](https://i.imgur.com/dZeGeZT.gif)

## Conclusion

That's all for this blog post. I hope it was useful and that you've seen how much easier it is to make AJAX requests with jQuery vs. plain JavaScript. I also hope you liked the demo exercises 👍
In the next blog post, we'll see how to do this with the modern [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).